html元素水平垂直居中父级,CSS子元素在父元素中水平垂直居中的几种方法

1. 水平居中(margin: auto;)子父元素宽度固定，子元素上设置 margin: auto; 子元素不能设置浮动，否则居中失效。

#div1{

width: 300px;

height: 300px;

border: 1px solid red;

}

#div1 p {

width: 100px;

height: 100px;

background-color: green;

/*float: left; !*如果设置了浮动，则自动居中就会失效。*!*/

margin: 0 auto;

}

2. 水平居中，子父元素宽度固定，父元素设置 text-align: center;

子元素设置 display: inline-block; 子元素不能设置浮动，否则居中失效。

如果将元素设置为 inline , 则元素的宽高设置会失效，这就需要内容来撑起盒子

#div2 {

width: 300px;

height: 300px;

border: 1px solid red;

/*position: relative;*/

text-align: center;

}

#div2 p{

width: 100px;

height: 100px;

background-color: green;

margin:;

/*float: left; !*如果设置了浮动，则自动居中就会失效。*!*/

display: inline-block;

/*display: inline;*/

/*display: inline-flex;*/

}

其他内容

其他内容

1. 水平垂直居中，子元素相对于父元素绝对定位，

子元素top，left设置为50%，子元素margin的top，left减去自身高，宽的一半。

#div3 {

width: 300px;

height: 300px;

border: 1px solid red;

position: relative;

}

#div3 p {

width: 100px;

height: 100px;

background-color: green;

/*margin-top: 10%; !*百分比相对于父元素*!*/

/*padding-top: 10%; !*百分比相对于父元素*!*/

position: absolute;

top: 50%;

left: 50%;

margin-top: -50px;

margin-left: -50px;

}

其他内容

2. 水平垂直居中，子元素相对于父元素绝对定位，

将子元素的top，right，bottom，left均设为0，然后设置子元素 margin: auto;

#div4{

width: 300px;

height: 300px;

border: 1px solid red;

position: relative;

}

#div4 p{

width: 100px;

height: 100px;

background-color: green;

position: absolute;

top:;

left:;

bottom:;

right:;

margin: auto;

}

其他内容

3. 水平垂直居中，父元素设置 display: table-cell; vertical-align: middle;

子元素设置 margin: auto;

这种方式是让所有的子元素作为一个整体垂直居中，并不能单独指定某一个子元素居中

#div5{

width: 300px;

height: 300px;

border: 1px solid red;

display: table-cell;

vertical-align: middle;

}

#div5 p{

width: 100px;

height: 100px;

background-color: green;

margin: auto;

}

4. 水平垂直居中，子元素相对定位，top，let设为50%，transform: translate(-50%, -50%);

这种方式并不会释放子元素在文档中所占的位置。

#div6{

width: 300px;

height: 300px;

border: 1px solid red;

}

#div6 p {

width: 100px;

height: 100px;

background-color: green;

margin:;

position: relative;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

其他内容

5. 水平垂直居中，子元素相对于父元素绝对定位，

子元素top，let设为50%，transform: translate(-50%, -50%);

这种方式会释放子元素在文档中所占的位置

#div7{

width: 300px;

height: 300px;

border: 1px solid red;

position: relative;

}

#div7 p {

width: 100px;

height: 100px;

background-color: green;

margin:;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

其他内容

6. 水平垂直居中，父元素设置 display: flex; justify-content: center; align-items: center;

justify-content: center; 是让所有的子元素作为一个整体居中。

#div8{

width: 300px;

height: 300px;

border: 1px solid red;

display: flex;

justify-content: center;

align-items: center;

}

#div8 p{

width: 100px;

height: 100px;

background-color: green;

margin:;

}

CSS水平垂直居中的几种方法2

直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

CSS水平垂直居中的几种方法

直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

CSS实现水平垂直居中的数种方法整合

CSS实现水平垂直居中可以说是前端老生常谈的问题了,一般面试官问的时候面试者都会回答出来,但是继续追问还有没有其他方法的时候有可能就说不出来了. 本着学习知识的目的,特在此纪录CSS实现水平垂直居中的 ...

【笔记】让DIV水平垂直居中的两种方法

今天写的了百度前端学院春季班的任务:定位和居中问题  由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...

如何将一个div水平垂直居中？4种方法做推荐

方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...

如何将一个div水平垂直居中？6种方法做推荐

方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...

Div水平垂直居中的三种方法

百度了很多种方法,很多是不起作用的.下面这些方法是我亲自试过的.希望对大家有帮助! 下面是一波代码水军.

CSS .parent { ...