在Web開發中,經常會遇到需要調整字體居中的情況。使用CSS可以很輕松地實現這一點。
/* 左右居中 */ .center { text-align: center; } /* 上下居中 */ .parent { display: flex; align-items: center; justify-content: center; } /* 上下左右居中 */ .parent { display: flex; align-items: center; justify-content: center; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
以上代碼分別實現了左右居中、上下居中、上下左右居中三種情況。其中上下左右居中需要設置父容器為彈性布局,子容器則使用絕對定位和transform屬性來達到居中效果。
需要注意的是,以上方法均需要保證子元素的寬高已知,否則無法居中。