CSS中怎么实现水平、垂直居中

这篇文章给大家介绍CSS中怎么实现水平、垂直居中，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

首先我先创建一个公共的模板样式

<template>  <div class="two">    <div class="parent">      <div class="child">123</div>    </div>  </div></template><style lang="less" scoped>.parent{  margin: 0 auto;  width: 300px;  height: 300px;  border: 1px solid red;  box-sizing: border-box;  .child {    height: 100px;    width: 100px;    background: #2f8df0;  }}</style>

然后具体用到的样式单独写在方法里面，首先先介绍4个平时布局的技巧。

水平居中div里面的div，设置子元素的宽度。

.parent{width:300px;    margin:0 auto;}

注意：如果子元素设置了display:table-cell，那么margin:0 auto;将会失效。

设置文字垂直居中，设置包含文字div的高。

.child{    text-align：center    line-height:100px //知道子元素的高,设置和高一样的高度}

两个或者多个块级元素垂直居中对齐，父元素设置height和line-height相等。

 .parent{     line-height: 300px; //知道父元素的高,设置和高一样的高度 }   .child1{    display: inline-block;    vertical-align: middle;    line-height: initial;  //initial 关键字用于设置 CSS 属性为它的默认值。   }   .child2{    display: inline-block;    vertical-align: middle;    line-height: initial;  //initial 关键字用于设置 CSS 属性为它的默认值。   }

让一个元素充满当前整个容器，设置absolute

.parent{position: absolute;top: 0;bottom: 0;left: 0;right: 0;}

OK，介绍完毕，下面开始介绍CSS实现水平垂直居中的方式。

不需要设置子元素的宽高，需要设置父元素的高度。使用 absolute + transform （推荐）

.parent{   position: relative }.child{    position: absolute;    top:50%;    left:50%;    transfORM:translate(-50%,-50%)}// 备注一下，如果只需要上下居中那就只要保留top,只要左右居中的话就保留left，translate设置   translateY(-50%)或者translateX(-50%)

不需要设置子元素的宽高，不需要设置父元素的宽高。 使用flex布局（建议移动端直接使用flex
pc端看需要兼容的情况。）

.parent{  display:flex;  align-items:center;  justify-content:center;}.child{ }

不需要设置子元素的宽高，需要设置父元素的高度。使用 lineheight。
注意：这种方法需要通过text-align在子元素中将文字显示重置为想要的效果

.parent{    line-height: 300px;  //设置和父元素的高度一样    text-align: center;}.child{    display: inline-block;    vertical-align: middle;    line-height: initial; //initial 关键字用于设置 CSS 属性为它的默认值。    text-align: left;  //将文字显示重置为想要的效果}

不需要设置子元素的宽高，需要设置父元素的高度。使用css-table (使用之后此元素的margin:0 auto会失效)

.parent{    display: table-cell;    vertical-align: middle;    text-align: center;}.child{  display: inline-block;}

设置子元素的宽高，设置父元素的高度。 使用absolute + 负margin

.parent{   position: relative }.child{    position: absolute;    top: 50%;    left: 50%;    margin-left: -50px; //知道子元素的宽高    margin-top: -50px;  //知道子元素的宽高}

设置子元素的宽高，设置父元素的高度。使用 absolute + margin auto

.parent{   position: relative }.child{    position: absolute;    top: 0;    left: 0;    right: 0;    bottom: 0;    margin: auto;}

设置子元素的宽高，设置父元素的高度。 使用 absolute + calc(这种方法兼容性依赖calc的兼容性)

.parent{   position: relative }.child{    position: absolute;    top: calc(50% - 50px);    left: calc(50% - 50px);}

使用writing-mode（使用起来比较复杂，不推荐）

 //公共的样式在最上面 <div class="parent">      <div class="box-child">        <div class="child">123</div>      </div>    </div>

.parent{     writing-mode: vertical-lr; //改变文字显示的方向    text-align: center;}.box-child{    writing-mode: horizontal-tb;    display: inline-block;    text-align: center;    width: 100%;}.child{    text-align: left; //将文字显示重置为想要的效果    margin: 0 auto;}

不需要设置子元素的宽高，不需要设置父元素的宽高。 使用grid布局（不建议使用，目前兼容性不是很好）

.parent{    display: grid;}.child{     align-self: center;     justify-self: center;}

使用table布局（纯粹凑方法，这年头，谁还用table布局呀，哈哈哈哈）

<table>    <tbody>        <tr>            <td class="parent">                <div class="child">123</div>            </td>        </tr>    </tbody></table>

.parent{    text-align: center;}.child{    display: inline-block;}

关于CSS中怎么实现水平、垂直居中就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。