每一種居中的解決方式也是不同的，因為元素的存在方式是不同的，有的是塊級元素有的是行內元素。我們先看水平居中：
id="container">
我愛學習！p>
div>
*
#container
a
id="middle">
aaadiv>
div>
*
#container
#middle
id="container">
我是浮動的p>
我也是居中的p>
div>
*
#container
p
container
adiv>
bdiv>
cdiv>
ddiv>
div>
*
#container
div
id="container">
我愛學習！p>
div>
*
#container
p
2.出現**單元格的話padding就會失效，這時候需要使用vertical-align屬性。
border="1">
1td>
2td>
tr>
3td>
4td>
tr>
5td>
6td>
tr>
table>
*
table
tr
2.父元素高度已知,可以通過css3的乙個屬性來實現，如下：id="container">
id="child">我愛學習！
div>
div>
*
#container
#child
id="child">我愛學習！
div>
div>
*
#container
#child
id="child">我愛學習！
div>
div>
*
#container
#child
id="child">我愛學習！
div>
div>
*
#container
#child
CSS布局 水平垂直居中
題外話 這是乙個讓人抓狂的問題。html文件結構如下 實現效果 1.子元素已知寬高 給父容器設定相對定位 relative 子元素設定為絕對定位 absolute top left設定為50 margin top margin left分別設定為高寬的一半的負數。outer inner 2.子元素未...
CSS 布局 水平垂直居中
原理 首先利用 absolute 定位把容器塊左頂角對準瀏覽器中心，然後再使用 負 margin 把容器塊向左移動自身寬度的一半，向上移動自身高度的一半，即可以把容器塊的中心移到瀏覽器中心。優點 相容性好 缺點 需要知道寬高，不夠靈活 container原理 首先利用 absolute 定位把容器塊...
CSS水平垂直居中布局
在日常開發中，經常會遇到要求水平垂直居中效果 實現水平垂直居中也是面試高頻考點 水平垂直居中又分兩種情況 1.內容定寬高 2.內容不定寬高 內容定寬高1.絕對定位和負margin值 doctype html en utf 8 水平垂直居中效果 title box content style head...