水平居中垂直居中,实现垂直水平居中的方法

http://www.Sina.com/http://www.Sina.com/首先确认父元素是否是块级元素，如果是，则直接向父元素输入3358 www.Sina.com /

style #father { width: 500px； height: 300px； background-color: skyblue； 文本照明3360中心； }/style divid=' father ' span id=' son '如果我不是内嵌元素/span/div，我会首先将父元素设置为块级元素，然后在父元素中输入一、水平居中

style # father { display :块； width: 500px； height: 300px； background-color: skyblue； 文本照明3360中心； }/style span id=' father ' span id=' son '我要内联元素/span/span效果：

http://www.Sina.com/http://www.Sina.com/http://www.Sina.com/谁需要在中间，在那里设定3358 www.Sina.com /。 (作用：让箱子自己放在中间) ) )。

style #father { width: 500px； height: 300px； background-color: skyblue； } #son { width: 100px； height: 100px； background-color: green； 边距： 0自动； }/style divid=' father ' divid=' son '我要块级元素/div/div效果：

3358www.Sina.com/默认子元素的宽度与父元素相同。 在这种情况下，必须将子元素设置为转换为1、行内元素或text-align: center;内联级/内联元素，并将父元素设置为3358www.Sina.com

style#father { width: 500px； height: 300px； background-color: skyblue； 文本照明3360中心； } # son { background-color : green； 显示： inline； }/style divid=' father ' divid=' son '我是块级元素/div/div效果。 (将#son转换为内嵌元素，内容高度支撑#son的高度，设置高度是徒劳的) ) )。

3358www.Sina.com/首先将父元素设置为相对位置，然后将子元素设置为绝对位置。 子元素text-align: center;设置子元素的左上角水平居中。

3358www.Sina.com/设置绝缘体元素http://www.Sina.com，或单击3358www.Sina.com/

style #father { width: 500px； height: 300px； background-color: skyblue； 定位：关系； } #son { width: 100px； height: 100px； background-color: green； 定位：助手； left: 50%； 边距左边缘：-50px； }/style divid=' father ' divid=' son '我是块级元素/div/div 2、块级元素

定宽度：利用css3新增属性transform: translateX(-50%);

<style> #father { width: 500px; height: 300px; background-color: skyblue; position: relative; } #son { height: 100px; background-color: green; position: absolute; left: 50%; transform: translateX(-50%); }</style> <div id="father"> <div id="son">我是块级元素</div></div>

效果：

  方案三：使用flexbox布局实现（宽度定不定都可以）

使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;

<style> #father { width: 500px; height: 300px; background-color: skyblue; display: flex; justify-content: center; } #son { width: 100px; height: 100px; background-color: green; }</style> <div id="father"> <div id="son">我是块级元素</div></div>

效果：

二、垂直居中 1、单行的行内元素

只需要设置单行行内元素的"行高等于盒子的高"即可；

<style> #father { width: 500px; height: 300px; background-color: skyblue; } #son { background-color: green; height: 300px; }</style> <div id="father"> <span id="son">我是单行的行内元素</span></div>

效果：

2、多行的行内元素

使用给父元素设置display:table-cell;和vertical-align: middle;属即可；

<style> #father { width: 500px; height: 300px; background-color: skyblue; display: table-cell; vertical-align:middle; } #son { background-color: green; }</style> <div id="father"> <span id="son">我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素</span></div>

效果：

 

 3、块级元素 方案一：使用定位

首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的top: 50%，即让子元素的左上角垂直居中；

定高度：设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%);

<style> #father { width: 500px; height: 300px; background-color: skyblue; position: relative;} #son { height: 100px; background-color: green; position: absolute; top: 50%; margin-top: -50px;}</style> <div id="father"> <div id="son">我是块级元素</div></div>

不定高度：利用css3新增属性transform: translateY(-50%);

<style> #father { width: 500px; height: 300px; background-color: skyblue; position: relative;} #son { width: 100px; background-color: green; position: absolute; left: 50%; transform: translateY(-50%);}</style> <div id="father"> <div id="son">我是块级元素</div></div>

效果：

方案二：使用flexbox布局实现（高度定不定都可以）

使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;

<style> #father { width: 500px; height: 300px; background-color: skyblue; display: flex; align-items: center; } #son { width: 100px; height: 100px; background-color: green; }</style> <div id="father"> <div id="son">我是块级元素</div></div>

效果：

 

三、水平垂直居中 1、已知高度和宽度的元素

方案一：设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;

<style> #father { width: 500px; height: 300px; background-color: skyblue; position: relative;} #son { width: 100px; height: 100px; background-color: green; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;}</style> <div id="father"> <div id="son">我是块级元素</div></div>

效果：

方案二：设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;

<style> #father { width: 500px; height: 300px; background-color: skyblue; position: relative;} #son { width: 100px; height: 100px; background-color: green; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px;}</style> <div id="father"> <div id="son">我是块级元素</div></div>

效果：

 

2、未知高度和宽度的元素 方案一：使用定位属性

设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

<style> #father { width: 500px; height: 300px; background-color: skyblue; position: relative;} #son { background-color: green; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);}</style> <div id="father"> <div id="son">我是块级元素</div></div>

效果：

方案二：使用flex布局实现

设置父元素为flex定位，justify-content: center; align-items: center;

<style> #father { width: 500px; height: 300px; background-color: skyblue; display: flex; justify-content: center; align-items: center;} #son { background-color: green;}</style> <div id="father"> <div id="son">我是块级元素</div></div>

效果：