CSS中的多種居中方式

2021-09-27 12:44:54 字數 951 閱讀 9735

css居中一直是我想要整理記錄的，拖了很久，今天就順便整理一下

是我目前使用最多的一種方式，flex布局也是現在最方便的一種布局，廣泛用於pc端和移動端

.container
grid布局是一種比flex更加強大的布局，但是目前兼用性並不好，我使用的並不多，但也能實現居中

.container
傳統中比較新的方法，我用的不多，需要水平居中就加上 text-align: center;

.container
傳統方法，適用於絕對定位

.container 


.child
利用vertical-align: middle的特性和中線對齊,用偽元素將內部撐高，需要水平居中就加上 text-align: center。

.container 


.container::before
如果不加固定高度使用padding讓上下padding相等就可以實現垂直居中了，需要水平居中就加上 text-align: center，適用於一些較簡單的場景

.container
如果需要固定高度，然後實現垂直居中，可以將高度設定成行高。同樣，需要水平居中就加上 text-align: center;

.container
塊級元素，設定固定寬度，左右margin等於auto

div
對塊級的父級使用，能讓內部的匿名行盒(文字)、行內元素(span)、inline-block元素在父親裡水平居中

.container

更多專業前端知識，請上

【猿2048】www.mk2048.com

CSS中多種常見居中方法

container container container center 將上下padding的值相等 container center class parent class child 這裡內容會自動居中 td tr table 設定display的值為table cell，將元素變為 cell顯...

css居中方式

水平居中的text align center 和 margin 0 auto 前者是針對父元素進行設定而後者則是對子元素。他們起作用的首要條件是子元素必須沒有被float影響。垂直居中的line height 作用在父元素上，當他的值等於父元素的height值時，內部的文字就會自動的垂直居中 萬能p...

CSS的居中方式

剛學習css的時候嘗試過幾種居中的方法,這些方法不需要借助js手段,所寫的方法有乙個原則,就是在不需要直接人為的設定好寬高計算後再實現居中,還有諸如table布局啊 行高設定 margin auto之類的我就不寫了。以下幾種方法針對不同的瀏覽器,經過測試,從ie8及以下到ie9 safari都有不同...