關於css水平居中的分析
- 高洛峰原創
- 2017-03-08 14:12:281075瀏覽
水平居中是常用的幾種佈局方式之一。主要分為行內元素的居中，塊元素的居中。塊元素的居中也分為固定寬度的居中，不定寬度的居中。行內元素的居中，使用text-align:center就可以實現，已知寬度的塊元素的居中，使用絕對定位以及設置
margin為寬的一半的負值就可以實現。但是不定寬度的居中比起上面兩種更常用，也更複雜，我們常常需要在分頁的頁碼展示等地方用到不定寬居中，使用起來更方便，下面來研究下常用的幾種塊元素的水平居中。
1.標籤巢狀偏移
實作原理：
聯想到固定寬度的居中的實作：先偏移到螢幕中央，在設定其margin方向偏移寬的一半。那麼能不能想到一種方法，借用這種思路，先偏移50%到螢幕的右半部分，然後在反方向偏移回來？實現起來比較困難的點是不知道這個寬度是多少。又想到只要讓其父寬度和子寬度相等，然後用百分數就可以解決。那麼要怎麼讓其父寬度和字寬度一樣呢？巧借float具有的包裹性：父元素如果漂浮了，並且沒有設定寬高，那麼將盡量包裹子元素。
實作程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>不定宽度水平居中</title>
<style>
body{
background-color: #e5da31;
}
.container{
position: absolute; /*脱离文档流，其宽度将由子元素的宽度决定*/
left:50%;
}
.content{
position: absolute;
left:-50%;
background-color: #2ecc71;
}
</style>
</head>
<body>
<p class="container">
<p class="content">标签嵌套</p>
</p>
</body>
</html>
實作效果：
優點與缺點：
缺點很明顯，需要自己寫和文件內容無關的標籤，多打了幾行程式碼相容性良好，在ie6+瀏覽器上查看沒有問題
#2.flex-box佈局
實作原理：
先定義一個flex容器，然後設定其內容對齊方式為中間對齊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>不定宽度水平居中</title>
<style>
body {
background-color: #e5da31;
}
.container {
display: flex; /*定义一个flex容器*/
justify-content: center; /*定义容器的空间没有被全部占用时，内容的对其方式*/
}
.content{
background-color: #2ecc71;
}
</style>
</head>
<body>
<p class="container">
<p class="content">标签嵌套</p>
</p>
</body>
</html>
實作效果：
優缺點分析：
實作起來最簡單，但是呢，因為flex的相容性不好，當要相容低階瀏覽器時慎重使用。
3.內嵌佈局
實作原則：
text-align:center可以讓行內元素水平居中，如果改變塊元素為行內元素，在使用text-align就可以實現水平居中。
實作程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>不定宽度水平居中</title>
<style>
body{
background-color: #e5da31;
}
.container{
text-align:center;
}
.content{
display: inline;
background-color: #2ecc71;
}
</style>
</head>
<body>
<p class="container">
<p class="content">标签嵌套</p>
</p>
</body>
</html>
實現效果：
#
優缺點分析：
用原本是修飾文字對齊方式的text-align來實現水平居中總感覺有點彆扭，這塊外面的container也先多餘，但是為了不影響body內其他元素的局部，暫且如此。另外相容性不錯，在ie6+可以正常顯示。
以上就是小編為大家帶來的關於css水平居中的小小探討全部內容了，希望大家多多支持PHP中文網~
以上是關於css水平居中的分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！