html设置div内容垂直居中,css让DIV元素或文字水平垂直居中的五种方法
div元素或文字水平垂直居中的5中方法
第一种方法:使用 top: 50%/left: 50%和translateX(-50%) translateY(-50%);具体代码如下:
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
实例:
如何让元素或文字水平垂直居中.container {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
文字水平垂直居中
方法二:使用display: flex; align-items: center; justify-content: center;属性
html, body, .container {
height: 100%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
实例:
如何让元素或文字水平垂直居中html, body, .container {
height: 100%;
}
.container {
display: flex;
al
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!
