css样式实现居中对齐

一、行内元素的居中

1.水平居中

1.text-align

    .parent {background-color: red;text-align: center;}

  <div class="parent"><span class="child">content</span></div>

2.fit-content

    .parent {background-color: red;width: fit-content;margin: auto;}

  <div class="parent"><span class="child">content</span></div>

2.垂直居中

1.line-height(单行文本)

    .parent {height: 200px;line-height: 200px;background-color: red;}

  <div class="parent"><span class="child">content</span></div>

二、块级元素的居中

水平居中:margin:0 auto;

    .parent {background-color: red;}.child {margin: 0 auto;width: 100px;background-color: royalblue;}

  <div class="parent"><div class="child">content</div></div>

三、水平垂直居中

1.提前知道子元素的宽高

    .parent {position: relative;height: 200px;background-color: red;}.child {height: 100px;width: 100px;position: absolute;background-color: royalblue;left: 50%;top: 50%;margin-top: -50px;margin-left: -50px;}

  <div class="parent"><div class="child">content</div></div>

也可以使用css中的calc函数

    .parent {position: relative;height: 200px;background-color: red;}.child {height: 100px;width: 100px;position: absolute;background-color: royalblue;left: calc(50% - 50px);top: calc(50% - 50px);}

2.不知道子元素的宽高

    .parent {position: relative;height: 200px;background-color: red;}.child {position: absolute;background-color: royalblue;left: 50%;top: 50%;transform: translate(-50%,-50%);}

3.定位+margin

    .parent {position: relative;height: 200px;background-color: red;}.child {width: 100px;height: 100px;background-color: royalblue;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;}

4.padding

    .parent {padding: 20px;background-color: red;}.child {height: 200px;background-color: royalblue;}

5.通过flex实现

    .parent {height: 200px;display: flex;align-items: center; /*控制垂直居中*/justify-content: center; /*控制水平居中*/background-color: red;}.child {width: 100px;height: 100px;background-color: royalblue;}

6.伪元素

 .parent {height: 200px;text-align: center;vertical-align: middle;background-color: red;}.child {width: 100px;height: 100px;display: inline-block;vertical-align: middle;background-color: royalblue;}.parent::before {   /*默认行内元素，添加display: inline-block;成为行内块元素*/content: "";width: 20px;height: 200px;display: inline-block;vertical-align: middle;}

7.calc函数

    .parent {height: 600px;width: 600px;background-color: red;}.child {width: 100px;height: 100px;padding: calc((100% - 100px) / 2);/*使子元素的margin都是250px*/background-clip: content-box;/*只对子元素生效，防止f覆盖父元素*/background-color: royalblue;}