首页 > 代码库 > css实现水平 垂直居中

css实现水平 垂直居中

2024-09-14 17:25:17   216人阅读

　　css实现水平居中

　　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平居中</title>
    <style>
        .box1{
            border: 1px solid #000;
            text-align: center;
        }
        .box2{
            display: inline-block;
            background-color: green;
        }
        /*...............................*/
        .box3{
            border: 1px solid #000;
        }
        .box4{
            display: table;
            margin: 0 auto;
            background-color: yellow;
        }
        .box5{
            width: 100px;
            margin: 0 auto;
            text-align: center;
        }
        /*...............................*/
        .box6{
            display: flex;
            justify-content: center;
            border: 1px solid #000;
        }
        .box7{
            background-color: blue;
        }

        .box8{
            display: flex;
            border: 1px solid #000;
        }
        .box9{
            margin: 0 auto;
            background-color: pink;
        }
        /*..............................*/
        .tip1{
            position: relative;
            height: 20px;
            border: 1px solid #000;
        }
        .tip2{
            position: absolute;
            left: 50%;
            /*margin-left: -50%;*/
            transform: translateX(-50%);
            background-color: gray;
        }
    </style>
</head>
<body>
<!-- 思路1：子元素变为行内块，给父级元素text-align：center; -->
    <div class="box1">
        <div class="box2">
            水平居中
        </div>
    </div>
    <!-- 思路2：给要居中的元素display:table;
    然后给他一个margin: 0 auto;(如果这个元素有固定宽度的话，直接给margin: 0 auto;) -->
    <div class="box3">
        <div class="box4">
            水平居中
        </div>
        <div class="box5">
            水平居中
        </div>
    </div>
    <!-- 思路3：使用弹性盒子模型flex实现水平居中【IE9不支持】 -->

    <!-- a.在伸缩容器上设置主轴对齐方式justify-content：center; -->
    <div class="box6"> 
        <div class="box7">
            水平居中
        </div>
    </div>
    <!-- b.在伸缩项目上设置margin:0 auto; -->
    <div class="box8">
        <div class="box9">
            水平居中
        </div>
    </div>
    <!-- 思路4：通过设置绝对定位偏移量和translateX(-50%)居中 -->
    <div class="tip1">
        <div class="tip2">水平居中</div>
    </div>-->
</body>
</html>

 

　　在chrome中显示：技术分享

　　css实现垂直居中

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直居中</title>
    <style>
        .box1{
            line-height: 30px;
            height: 30px;
            border: 1px solid #000;
        }
        /*..........................*/
        .box2{
            border: 1px solid #000;
            display: table-cell;
            height: 100px;
            vertical-align: middle;
        }
        .box3{
            background-color: red;

        }
        .box4{
            line-height: 100px;
            font-size: 0;
            border: 1px solid #000;
            background-color: #ccc;
        }
        img{
            vertical-align: middle;
            width: 50px;/*给图片一个宽度，他高度也会按比例确定*/
        }
        /*.....................................*/
        .box5{
            position: relative;
            border: 1px solid #000;
            height: 100px;
        }
        .box6{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        .box7{
            position: relative;
            border: 1px solid #000;
            height: 300px;
        }
        .box8{
            position: absolute;
            top: 0;
            bottom: 0;
            height: 100px;
            margin: auto 0;
            border: 1px solid #000;
        }
        /*...............................*/
        .tip1{
            display: flex;
            align-items: center;
            height: 100px;
            border: 1px solid #000;
        }
        .tip3{
            display: flex;
            border: 1px solid #000;
            height: 100px;
        }
        .tip4{
            margin: auto 0; 
        }
    </style>
</head>
<body>
    <!-- 思路1：line-height实现单行文本垂直居中 -->
    <div class="box1">
        垂直居中
    </div>
    <!-- 思路2：设置vertical-align：middle实现垂直居中 -->
    <!-- a.给父元素设置display：table-cell（单元格）再给父元素设置vertical-align：middle;使子元素实现垂直居中。【注意；一旦给父元素设置为table-cell，就不能给他浮动或绝对定位，因为浮动或绝对定位会使元素具有块级元素特性，从而丧失了table-cell元素具有的垂直对齐的功能。若需要浮动或绝对定位处理，则需要外面再套一层div】 -->
    <div class="box2">
        <div class="box3">
            垂直居中
        </div>
    </div>
    <!-- b.若子元素是图片，通过设置父元素的行高来代替高度，且设置父元素的font-size为0。

　　给子元素设置vertical-align:middle。他的解释是元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐。由于字符X在em框中并不是垂直居中的，且各个字体的字符X的高低位置不一致。  所以，当字体大小较大时，这种差异就更明显。当font-size为0时，相当于把字符X的字体大小设置为0，于是可以实现完全的垂直居中 -->
    <div class="box4">
        <img src="img/qiao.jpg" />        
    </div>

    <!-- 思路3：通过绝对定位实现垂直居中 -->
    <!-- 【1】配合translate()位移函数
     translate函数的百分比是相对于自身高度的，所以top:50%配合translateY(-50%)可实现居中效果
    [注意]IE9-浏览器不支持
    [注意]若子元素的高度已知，translate()函数也可替换为margin-top: 回退自身高度的50%; -->
    <div class="box5">
        <div class="box6">垂直居中</div>
    </div>
    <!-- 【2】若子元素定高，结合绝对定位的盒模型属性，实现居中效果 -->
    <div class="box7">
        <div class="box8">
            垂直居中
        </div>
    </div>
    <!-- 思路4：使用弹性盒模型flex实现垂直居中
    [注意]IE9-浏览器不支持 -->
    <!-- 【1】在伸缩容器上设置 display:flex;侧轴对齐方式align-items: center -->
    <div class="tip1">
        <div class="tip2">垂直居中</div>
    </div>
    <!-- 【2】在伸缩项目上设置margin: auto 0 -->
    <div class="tip3">
        <div class="tip4">垂直居中</div>
    </div>
</body>
</html>

　　在chrome中显示：

技术分享

 

　　　　css实现水平垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直都居中</title>
    <style>
        .box1{
            border: 1px solid #000;
             line-height: 20px;
             text-align: center;
             width: 1000px;
        }
        /*.......................................*/
        .box2{
            border: 1px solid #000;
            width: 200px;
            height: 100px;
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }
        .box3{
            display: inline-block;

        }

        .box4{
            border: 1px solid #000;
            line-height: 100px;
            font-size: 0;
            text-align: center;
            width: 300px;
            background-color: gray;
        }
        img{
            vertical-align: middle;
            width: 50px;
        }
        /*.........................................*/
        .box5{
            border: 1px solid #000;
            width: 300px;
            height: 100px;
            display: table-cell;
            vertical-align: middle;
        }
        .box6{
            display: table;
            margin: 0 auto;
        }
        /*...........................................*/
        .box7{
            border: 1px solid #000;
            width: 300px;
            height: 100px;
            position: relative;
        }
        .box8{
            width: 100px;
            height: 50px;
            position: absolute;
            margin: auto;
            border: 1px solid #000;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;    
        }
        .tip1{
            position: relative;
            border: 1px solid #000;
            height: 100px;
        }
        .tip2{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

        .tip3{
            position: relative;
            border: 1px solid #000;
            height: 100px;
            width: 300px;
        }
        .tip4{
            position: absolute;
            width: 100px;
            height: 50px;
            top: 50%;
            left: 50%;
            margin-top: -25px;
            margin-left: -50px;
            border: 1px solid #000;
        }
        /*/*........................................*/
        .tip5{
            display: flex;
            border: 1px solid #000;
            width: 300px;
            height: 100px;
        }
        .tip6{
            margin: auto;
        }
        .tip7{
            border: 1px solid #000;
            width: 300px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .tip8{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <!-- 思路1：text-align：center和line-height实现单行文本垂直水平居中。 -->
    <div class="box1">
        垂直水平居中
    </div>

    <!-- 思路2: text-align + vertical-align
【1】在父元素设置text-align和vertical-align，并将父元素设置为table-cell元素，子元素设置为inline-block元素 -->
    <div class="box2">
        <div class="box3">垂直水平居中</div>
    </div>
<!-- 【2】若子元素是图像，可不使用table-cell，而是其父元素用行高替代高度，且字体大小设为0。子元素本身设置vertical-align:middle -->
    <div class="box4">
        <img src="img/qiao.jpg" />
    </div>

    <!-- 思路3：margin+vertical-align
    要想在父元素中设置vertical-align，须设置为table-cell元素；要想让margin:0 auto实现水平居中的块元素内容撑开宽度，须设置为table元素。而table元素是可以嵌套在tabel-cell元素里面的，就像一个单元格里可以嵌套一个表格 -->
    <div class="box5">
        <div class="box6">垂直水平居中</div>
    </div>

    <!-- 思路4：使用absolute
    【1】利用绝对定位元素的盒模型特性，在偏移属性为确定值的基础上，设置margin:auto -->
    <div class="box7">
        <div class="box8">垂直水平居中</div>
    </div>
    <!-- 【2】利用绝对定位元素的偏移属性和translate()函数的自身偏移达到水平垂直居中的效果
    [注意]IE9-浏览器不支持 -->
    <div class="tip1">
        <div class="tip2">垂直水平居中</div>
    </div>
    <!-- 【3】在子元素宽高已知的情况下，可以配合margin负值达到水平垂直居中效果(最常用) -->
    <div class="tip3">
        <div class="tip4">垂直水平居中</div>
    </div>
    <!-- 思路5：使用flex -->
    <!-- 1.在伸缩项目上使用margin：auto -->
    <div class="tip5">
        <div class="tip6">垂直水平居中</div>
    </div>
    <!-- 【2】在伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items -->
    <div class="tip7">
        <div class="tip8">垂直水平居中</div>
    </div>
</body>
</html>

 

　　　　在chrome中显示：

　　技术分享

 

css实现水平 垂直居中


联系
我们