居中对齐的几种方式

水平居中对齐的几种方式

1.对于最简单的行内元素的居中采用text-align:center;设置即可//1.注意是父元素添加2.子元素会继承父元素的居中方式

父元素添加 text-align: center;子元素中的所有的行内标签都会水平居中，块级标签中的文字也会居中，即是说，父元素拥有text-align: center;子元素中的字体和行内元素都会居中，并且效果延续至子代。

text-align:center；//父元素拥有，子元素水平居中  

 <div class="ta">
        <!-- //块级元素 -->
        <p>你好 世界</p>
        你好 世界 //
        <h1>你好 世界</h1>
        <div>你好 世界</div>
        <!-- 行内元素 -->
        <img src="./搜索.svg" alt="">
    </div>
     .ta {
        width: 400px;
        height: 400px;
        background-color: rgb(137, 177, 177);
        text-align: center;
        display: inline-block;
        /* overflow: hidden; */
    }

    .ta p {
        font-size: 120%;
    }

    .ta div {
        margin-top: 50px;
        width: 200px;
        height: 200px;
        background-color: antiquewhite;
    }

遇到了高度塌陷

2.marin:0 auto;对于已知宽度的元素使用，实现水平居中。

 <div class="content content2">
        <div class="center2">
            划线区域部分采用margin:0 auto;来实现水平居中显示，需提前写好元素的宽度。
        </div>
    </div>
  
  .content {
        height: 100px;
        border: 2px solid #fff;
    }
    .content2 {
        background: #645d5a;
        text-align: center;
    }

    .center2 {
        height: 50px;
        width: 60%;
        border: 2px solid rgb(207, 136, 136);
        line-height: 50px;
        margin: 0 auto;
    }

3.table始现水平居中 1. 将外部块格式化为表格单元格就可垂直居中文本。2.元素外部嵌套table始现。

 <div class="content content3">
       <table><tbody><tr><td>
          这是内容区三：用table实现。
        </td></tr></tbody></table>
</div>
.content3{
    background: #2f5d34;
}
 table{
 margin: 0 auto;
 }

4.块级的元素转换为行内块元素来实现块级元素的水平居中显示。

<div class="content content4">
        <div class="center4">
            块级元素转换成行内元素并且居中
        </div>
    </div>
 .content4 {
        background: #9d43b4;
        text-align: center;
    }

    .center4 {
        display: inline;
    }

5.利用定位使元素居中，计算方式 父元素的宽度减去子元素的宽度 除以2 得到left或right的值，注意相对定位和绝对定位的应用。

  <div class="fu">
        <div class="er">
            我是中间的
        </div>
    </div>
    <style>
    .fu {
        position: relative;
        width: 500px;
        height: 500px;
        background-color: aqua;
    }

    .er {
        position: relative;
        text-align: center;
        line-height: 150px;
        width: 150px;
        height: 150px;
        left: 175px;
        top: 175px;
        background-color: aliceblue;
    }
</style>
		

垂直居中的几种方式

1.给父元素添加

line-height:（height）;//height为父元素的高度

 <div>
 <p>你好 世界</p>
 </div>
 div{
  width: 200px;
        height: 200px;
        line-height: 200px;
 }

2.文字水平垂直居中 给父类元素加 vertical-align: middle; 但是这个元素有时会失灵 那是因为vertical-align只作用在inline-block或者inline，还有table-cell等元素内。

<div class="three">
        你好 世界
</div>
  .three {
        width: 400px;
        height: 200px;
        background: #ddd;
        display: table-cell;
        vertical-align: middle;
    }

将外部块格式化为表格单元格 表格单元格的内容可以垂直居中，将外部块格式化为表格单元格就可垂直居中文本。

3.利用flex布局垂直居中

 <div class="box">css 垂直居中--文本文字（弹性布局）</div>
 
    .box {
        display: flex;
        /*实现垂直居中*/
        align-items: center;
        /*实现水平居中*/
        justify-content: center;
        text-align: justify;
        width: 400px;
        height: 200px;
        background: rgb(80, 76, 76);
        margin: 0 auto;
        color: rgb(0, 0, 0);
    }

4.利用内边距 //使用不多 用起来比较麻烦

<div class="wai">
        <div class="nei">
            中间
        </div>
    </div>
      .wai {
        width: 500px;
        height: 500px;
        background-color: aqua;
        padding-top: 300px;
        padding-left: 300px;
    }

    .nei {
        width: 100px;
        height: 100px;
        background-color: antiquewhite;

    }

5.利用CSS3的定位 position加上transform来实现文字垂直居中 仅作代码展示 //兼容性低

.center {

  position: relative;

  top:50%;

  transform:translateY(-50%);

  left:50%;

  transform:translateX(-50%);
}

6.相对绝对定位 和上文的水平居中类似不做过对赘述。

7.定位加上margin 元素

 <div class="child"></div>
.child {
        position: fixed;
        width: 200px;
        height: 150px;
        background: blue;
        top: 50%;
        left: 50%;
        margin-top: -75px;
        margin-left: -100px;
    }

以上种种只是我总结出的居中方式，当然居中方式还有很多