居中分為垂直居中和水平居中。
水平居中
水平居中分為文字居中和元素居中。元素又分為塊元素和行內元素以及復合行內元素。
文字水平居中
文字水平居中可以直接用text-align:center;
塊元素水平居中
塊元素需要先給乙個width，之後將margin的左右設定為auto就行了
舉例：
doctype html>
塊元素水平居中title>
行內元素和復合行內元素水平居中
復合行內元素即是行內塊元素、inline-table、inline-flex等。
行內元素和復合行內元素可以直接用text-align:center;實現水平居中，與文字居中相似。
垂直居中
垂直居中分為文字垂直居中和元素垂直居中。
文字分為單行文字和多行文字
元素分為塊元素和行內塊元素
單行文字垂直居中
需要把height與line-height相等就能實現
doctype html>
單行文字垂直居中title>
多行文字垂直居中
實現：用標籤把所有文字包含，定義span為inline-block元素，之後使用inline-塊元素垂直居中的方式，可以先看下面inline-block元素垂直居中方式。
舉例：
doctype html>
多行文字垂直居中title>
display: table-cell;
vertical-align: middle;
width: 200px;
height: 150px;
border: 1px solid black;
span
style>
head>
劉德華張學友
郭富城黎明
塊元素垂直居中
對於高度已知的塊元素，可以使用position實現。
方法是：
父元素{
position: relative;
子元素{
position: absolute;
top: 50%;
left: 50%;
margin-top: "height值一半的負值";
margin-left: "width值一半的負值";
舉例：
doctype html>
塊元素垂直居中title>
.father{
position: relative;
width: 200px;
height: 150px;
border: 1px solid black;
.son{
position: absolute;
top: 50%;
left: 50%;
background-color: blue;
width: 50px;
height: 50px;
margin-top: -25px;
margin-left: -25px;
style>
head>
div>
div>
body>
html>
如果單獨需要水平居中，將top和margin-top屬性去掉。單獨需要垂直居中將left和margin-left屬性去掉。
行內塊元素垂直居中
方法：
父元素{
display: table-cell;
vertical-align: middle;
子元素{
vertical-align: middle;
舉例：
doctype html>
行內塊元素垂直居中title>
本節主要學習了居中技巧，最後對其總結。
css居中技巧
1text align center 只能對，按鈕，文字等行內元素 display為inline或inline block等 進行水平居中。在ie6 7中能對任何元素進行水平居中。另外它是把屬性應用給容器，對內部所有內容起作用，所以不是很好控制，但方法相容大多數瀏覽器用到的也很多。css 這裡有個新...
CSS水平和垂直居中技巧大梳理
水平居中 行內元素的水平居中 text align center 在父元素中設定 只對內聯元素或行內塊元素有效 需要放置于父元素中 塊級元素的水平居中 margin 0 auto 只對塊級元素有效 auto指的是自適應寬度。實質就是均分了元素左右的剩餘空間，所以元素會居中。auto只有在塊級元素設定...
CSS水平和垂直居中技術
行內元素的水平居中 text align center 在父元素中設定 塊級元素的水平居中 margin 0 auto 行內元素的垂直居中 line height 父元素的高度 在父元素中設定 vertical align middle 用於垂直對齊inline元素 例如將乙個icon與文字對齊。浮...