css佈局 對齊

元素居中對齊：可以使用margin:auto;外邊距設置 注意內邊距padding設置無效。

注意這種必須設置width屬性 設置爲60%

文本居中對齊 可以使用text-align:center 

圖片居中對齊，使用margin:auto,並且是塊元素，所以設置display爲block

img { display: block; margin: auto; width: 40%; }

垂直居中的對齊 可以使內部元素對齊。.center { padding: 70px 0; border: 3px solid green; }

。 一個簡單的方式就是頭部頂部使用 padding:

70px 0表示上下都間隔border70px；左右爲0

設置line-height和height屬性相同，也可以設置成居中。只適用於單行文字. line-height是指一個行的高度.

.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}

.center p {
    line-height: 3;
    display: inline-block;
   vertical-align:middle;
}

也可以使用display:table-cell 將div元素轉換成table-cell的元素,隨後可以使用vertical-align:middle 使內部元素垂直居中,使用text-align:center 使內部元素水平居中.

https://www.cnblogs.com/chen-cong/p/8076442.html

https://www.cnblogs.com/jiangwenli/p/4924172.html

有關的居中方法還需進一步的總結。