CSS樣式中設置居中是網頁制作中常用的技巧之一。居中可以使元素在視覺上更加美觀,更加注重細節的網站都是喜歡使用居中元素的。下面介紹幾種常用的居中設置方式:
/* 水平居中 */ .container { width: 50%; margin: 0 auto; } /* 垂直居中 */ .container { height: 50%; display: flex; justify-content: center; align-items: center; } /* 水平垂直居中 */ .container { height: 50%; width: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
其中,第一種方式是通過設置元素寬度和左右margin值相等來實現,比較簡單,但僅能實現水平居中效果。第二種方式使用了flex布局,設置了justify-content和align-items屬性來實現垂直居中,需要注意的是,要先設置容器的高度。第三種方式是通過將元素設置為絕對定位,然后設置top和left,再通過transform屬性來實現。這種方法比較通用,可以實現水平垂直同時居中的效果,但需要注意如果容器元素的寬高不一致,需要分別設置top和left的值。
上一篇dwr 圖庫 css
下一篇css樣式tab切換