首頁  >  文章  >  web前端  >  CSS佈局指南

CSS佈局指南

A 枕上人如玉、
A 枕上人如玉、原創
2020-06-14 18:38:12203瀏覽

1.1 水平居中布局

效果图如下:

image.png

方案一. inline-block + text-align

分析:display设置为inline-block的元素,具有文本元素的性质,其父元素可以通过设置文本对齐属性text-align来控制其在行内的对齐方式,text-align: center即为水平对齐

注意:text-align属性是具有继承性的,会导致自己元素内部的文本也是居中显示的,需要自身设置text-align覆盖


   


       

   

方案二. 定位 + transform

分析:父元素开启定位(relative,absolute,fixed都可以)后,子元素设置绝对定位absolute后,left设置为50%,再使用transform: translateX(-50%)将子元素往反方向移动自身宽度的50%,便完成水平居中。

注意:父级元素是否脱离文档流,不影响子元素水平居中效果,但是transform是css3属性,存在浏览器兼容问题


   


       

   

方案三. display: block + margin: 0 auto

分析:这个方法只需要对子元素进行设置就可以实现水平居中,margin设置auto表示浏览器会自动分配,实现来外边距等分效果。

注意:这里子元素设置display为block或者table都是可以的,如果子元素脱离文档流(浮动,定位),会导致margin属性的值无效。


   


       

   

1.2 垂直居中布局

效果图如下:

image.png

方案一. 定位 + transform

这种方案和之前水平居中布局的方案二是同样的原理,不在赘述


   


       

   

方案二. display: table-cell + vertical-align

分析:设置display: table-cell的元素具有td元素的行为,它的子元素布局方式类似文本元素,可以在父元素使用vertical-align: middle;实现子元素的垂直居中。

注意:vertical-align属性具有继承性,导致父元素内文本也是垂直居中显示的。


   


       

   

1.3 水平垂直居中布局

效果图如下:

image.png

前面分别总结了一些水平居中和垂直居中的布局方式,那么进行水平垂直居中的布局,也就没什么特别要说的了,直接上代码:

方案一.定位 + transform


   


       

   

方案二. 结合水平布局方案三,垂直布局方案二


   


       

   

1.4 使用flex進行居中佈局

分析:使用flex,水平垂直居中會變得非常容易,預設情況下,align-items: center垂直居中(交叉軸排列方式),justify-content: center水平居中(主軸排列方式)注意:需要考慮瀏覽器相容性問題。



   


       

 

    < div>


#

以上是CSS佈局指南的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn