在前端開發中,CSS的居中對齊經常會被面試涉及到,它是我們需要掌握的一個基本技能。下面介紹幾種簡單實用的居中對齊方法。
/* 水平居中對齊 */ .center-horizontal { width: 100px; /* 可根據實際情況設置寬度 */ margin: 0 auto; /* 設置左右外邊距為auto */ }
通過設置左右外邊距為auto,就可以實現水平居中對齊。寬度需要根據實際情況進行設定,一般情況下為固定寬度。
/* 垂直居中對齊 */ .center-vertical { height: 100px; /* 可根據實際情況設置高度 */ line-height: 100px; /* 行高等于高度 */ text-align: center; /* 文字水平對齊方式為中間 */ }
通過設置行高與高度相等,就可以實現垂直居中對齊。同時需要將文字水平對齊方式設置為中間,才能達到完全居中的效果。
/* 水平垂直居中對齊 */ .center { position: absolute; /* 絕對定位 */ top: 50%; /* 距離頂部50% */ left: 50%; /* 距離左側50% */ transform: translate(-50%,-50%); /* 將元素的中心點移動到容器的中心點 */ }
通過絕對定位和transform的方式可以實現水平垂直居中對齊。需要設置元素距離頂部和左側的距離都為50%,然后通過transform:translate(-50%,-50%)將元素的中心點移動到容器的中心點。
上一篇css屏幕劃過的高度
下一篇css居中垂直屬性