css实现居中的方法

1.水平居中

设置如下情景

<div class="parent"> <div class="child"> 111 </div> <div class="child"> 222 </div> </div> 

1.1 display:inline-block

父元素设置text-align:center;
子元素设置display:inline-block
这种方式实现了块级父容器中让行内元素或者类行内元素居中

<style> .parent{ width: 500px; height: 200px; background-color: brown; text-align: center; } .child{ width: 100px; height: 100px; display: inline-block; background-color: burlywood; } </style> 

• 效果
  

1.2 display:table

子元素设置 dispaly: table, margin: 0 auto;
注：table的宽度是由内容决定的，如果子元素是其他块级元素，也可以用这种方式实现在父元素中水平居中。但是，设置为其他块级元素，就要指定宽度，不然子元素的宽度就撑满父级元素了。（指定子元素的宽度，可能会出现子元素的内容超过宽度的情况）

<style> .parent{ width: 500px; height: 200px; background-color: brown; text-align: center; } .child{ width: 100px; height: 100px; display: table; margin: 0 auto; background-color: burlywood; } </style> 

1.3 position:absolute + transform

父元素设置position:relative
子元素设置position:absolute;left:50%;transform:translate(-50%);

<style> .parent{ width: 500px; height: 200px; background-color: brown; position: relative; } .child{ width: 100px; height: 100px; position: absolute; left: 50%; transform: translate(-50%); background-color: burlywood; } </style> 

1.4 display:flex

方法一：父元素设置display:flex; justify-content:center;
方法二：父元素设置display:flex; 子元素设置margin:0 atuo;（只能实现单个元素在父元素的居中）

• 方法一：

<style> .parent{ width: 500px; height: 200px; background-color: brown; display: flex; justify-content: center; } .child{ width: 100px; height: 100px; background-color: burlywood; } </style> 

• 方法二：

<style> .parent{ width: 500px; height: 200px; background-color: brown; display: flex; } .child{ width: 100px; height: 100px; margin: 0 auto; background-color: burlywood; } </style> 

多个：

单个：

2. 垂直居中

设置如下情景：

<style> .parent{ width: 300px; height: 300px; background-color: brown; display: table-cell; vertical-align: middle; } .child{ width: 100px; height: 100px; } .child1{ background-color: burlywood; } .child2{ background-color: blue; } </style> 

2.1 display: table-cell

父元素设置display:table-cell; vertical-align:middle;(可以使高度不同的元素都垂直居中)

<style> .parent{ width: 300px; height: 300px; background-color: brown; display: table-cell; vertical-align: middle; } .child{ width: 100px; height: 100px; } .child1{ background-color: burlywood; } .child2{ background-color: blue; } </style> 

2.2 position: absolute + transform

父元素设置position:relative;
子元素设置position:absolute; top:50%; transform:translate(-50%);

<style> .parent{ width: 300px; height: 300px; background-color: brown; position: relative; } .child{ width: 100px; height: 100px; position: absolute; top: 50%; transform: translateY(-50%); } .child1{ background-color: burlywood; } .child2{ background-color: blue; } </style> 

注：此处child2覆盖了child1

2.3 dispaly:flex

方法一：父元素设置display:flex;align-items:center;
方法二：父元素设置display:flex;子元素设置margin: auto 0;

<style> .parent{ width: 300px; height: 300px; background-color: brown; display: flex; /* align-items: center; */ } .child{ width: 100px; height: 100px; margin: auto 0; } .child1{ background-color: burlywood; } .child2{ background-color: blue; } </style> 

3. 水平垂直居中

3.1 inline-block + table-cell

父元素设置text-align: center; display: table-cell; vertical-align: middle;
子元素设置display: inline-block;text-align: left;

<style> .parent{ width: 300px; height: 300px; background-color: brown; text-align: center; display: table-cell; vertical-align: middle; /*消除间隔*/ font-size: 0; } .child{ width: 100px; height: 100px; display: inline-block; /* 子元素会继承父元素的text-align:center,这一步是防止子元素文字水平居中 */ text-align: left; /*恢复子元素的字体大小*/ font-size: 16px; } .child1{ background-color: burlywood; } .child2{ background-color: blue; } </style> 

3.2 absolute + transform

父元素设置position:relative
子元素设置position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);

<style> .parent{ width: 300px; height: 300px; background-color: brown; position: relative; } .child{ width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .child1{ background-color: burlywood; } .child2{ background-color: blue; } </style> 

注：还是child2覆盖了child1

3.3 flex + align-items + justify-content

父元素设置display:flex; justify-content:center; align-items:center;

<style> .parent{ width: 300px; height: 300px; background-color: brown; display: flex; justify-content: center; align-items: center; } .child{ width: 100px; height: 100px; } .child1{ background-color: burlywood; } .child2{ background-color: blue; } </style> 

3.4 绝对定位 + margin 0 auto

父元素设置position:relative
子元素设置position:absolute; top:0; left:0; right:0; bottom:0; margin auto auto;width和height

本文地址：https://blog.csdn.net/qq_41884544/article/details/113971494