CSS实现水平垂直的几种方法

目录

  • 水平居中
  • 垂直居中
  • 水平垂直居

一、水平居中

内联元素和块级元素实现水平居中的方法不一样,其中块级元素又分定宽和不定宽两种情况

  • 内联元素水平居中
    父元素为块级元素,在父元素设置 text-align: center; 即可

代码:

<!-- HTML--->
<div class="container">
    <p>我是内联元素</p>
</div>

<!-- CSS -->
<style>
.container{
            width: 100%;
            height: 100px;
            background-color: darkseagreen;
            /* 父元素是块级元素,直接设置text-align属性 */
            text-align: center;
        }
</style>

效果:


image.png
  • 块级元素水平居中(定宽)
    块级定宽,谁居中谁 margin: 0 auto;

代码:

<!-- HTML -->
<div class="container">
   <div class="first_box"></div>
</div>

<!-- CSS -->
<style>
.container{
            width: 100%;
            height: 100px;
            background-color: darkseagreen;
        }

        .first_box{
            width: 50px;
            height: 50px;
            background-color: rosybrown;
            /* 块级定宽,谁居中谁margin: 0 auto; */
            margin: 0 auto;
        }
</style>

效果:


image.png

代码:

<!-- HTML -->
<div class="container">
    <div class="second_box">我是不定宽的块级元素</div>
</div>

<!-- CSS -->
<style>
.container{
            width: 500px;
            height: 100px;
            background-color: darkseagreen;
 
            text-align: center;
        }

.second_box{
            background-color: rosybrown;
            display: inline;

        }
</style>

效果:


image.png

代码:

<!-- HTML -->
<div class="container1">
    <div class="third_box"></div>
</div>

<!-- CSS -->
<style>
.container1{
            width: 500px;
            height: 100px;
            background-color: darkseagreen;

            position: relative;

        }

        .third_box{
            width: 50px;
            height: 50px;
            background-color: rosybrown;
            position: absolute;
            left: 50%;
            margin-left: -25px;
        }
</style>

效果


image.png

代码:

<!-- HTML -->
<div class="container2" >
    <div></div>
</div>

<!-- CSS -->
<style>
.container2{
            width: 500px;
            height: 100px;
            background-color: darkseagreen;

            display: flex;
            justify-content: center;
        }

        .container2 div{
            width: 50px;
            height: 50px;
            background-color: rosybrown;
        }
</style>

效果:


image.png

flex布局详见阮一峰的flex布局教程 语法篇

二、垂直居中

实现垂直居中,亦分内联元素和块级元素,其中块级元素同分定高和不定高两种情况

单行代码:

<!-- HTML -->
<div class="container">
    <p>单行行内元素</p>
</div>

<!--CSS-->
<style>
.container{
            width: 500px;
            height: 200px;
            background-color: darkseagreen;
        }

        .container p{
            line-height: 200px;
        }
</style>

效果:


image.png

多行代码:

<!-- HTML -->
<div class="container">
    <p>我是多行行内元素我是多行行内元素我是多行行内元素我是多行行内
        元素我是多行行内元素我是多行行内元素我是多行行内元素我是多行行内元素我是多行行内元素</p>
</div>

<!--CSS-->
<style>
.container{
            width: 500px;
            height: 200px;
            background-color: darkseagreen;

            display: table-cell;
            vertical-align: middle;
        }
</style>

效果:


image.png

代码:

<!-- HTML -->
<div class="container">
    <div></div>
</div>

<!-- CSS -->
<style>
.container{
            width: 500px;
            height: 200px;
            background-color: darkseagreen;

            position: relative;

        }

        .container div{
            width: 50px;
            height: 50px;
            background-color: rosybrown;

            position: absolute;
            top: 50%;
            margin-top: -25px;
        }
</style>

效果:


image.png
<!-- HTML -->
<div class="container">
    <div>不定高度</div>
</div>

<!-- CSS -->
<style>
 .container{
            width: 500px;
            height: 200px;
            background-color: darkseagreen;

            position: relative;

        }

        .container div{
            width: 50px;
            background-color: rosybrown;

            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
</style>

效果:


image.png
  • 使用flex实现垂直居中
    代码:
<!-- HTML -->
<div class="container">
    <div>不定高度</div>
</div>

<!-- CSS -->
<style>
.container{
            width: 500px;
            height: 200px;
            background-color: darkseagreen;

            display: flex;
            align-items: center;

        }

        .container div{
            width: 50px;
            background-color: rosybrown;
        }
</style>

效果:


image.png

flex布局详见阮一峰的flex布局教程 语法篇

三、水平垂直居中

代码:

<!-- HTML -->
<div class="container">
    <div></div>
</div>
<!-- CSS -->
<style>
.container{
            width: 500px;
            height: 200px;
            background-color: darkseagreen;

            position: relative;

        }

        .container div{
            width: 50px;
            height: 50px;
            background-color: rosybrown;

            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }
</style>

效果:

代码:

<!-- HTML -->
<div class="container">
    <div></div>
</div>

<!-- CSS -->
<style>
.container{
            width: 500px;
            height: 200px;
            background-color: darkseagreen;

            display: flex;
            justify-content: center;
            align-items: center;

        }

        .container div{
            width: 50px;
            height: 50px;
            background-color: rosybrown;

        }
</style>

效果:

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容