css居中方式

2021-07-27 12:08:18 字數 756 閱讀 6012

水平居中的text-align:center 和 margin:0 auto

前者是針對父元素進行設定而後者則是對子元素。他們起作用的首要條件是子元素必須沒有被float影響。

垂直居中的line-height

作用在父元素上,當他的值等於父元素的height值時,內部的文字就會自動的垂直居中

萬能position**

(1)首先給父元素寫上positon:relative,這麼做是為了給子元素打上position:absolute的時候不會被定位到外太空去。

(2)接下去,寫上子元素的height和width

(3)再給子元素再打上top:50%; left:50%以及margin-top:一半的height值的的負數; margin- left:一半的weight值的負數。

效果圖

水平垂直居中

.main

半圓

.left

.right

CSS居中方式總結

一 水平居中 1 行內元素或者display為inline的塊級元素,前提是子元素沒有float 對父元素設定 text align center 2 塊級元素 已知寬高 1 元素自身設定為 margin 0 auto 2 利用絕對定位和margin結合的方式 elem 3 塊級元素 未知寬高 1 ...

CSS的居中方式

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

CSS居中方式總結

1.text align center 使用以上方式居中是將父級容器中display inline 的行內元素或者文字進行水平居中。2.inline height height 值 使用inline height時經常和height一起使用,使得內容垂直方向上居中,建議在列表內部的li中使用 3.m...