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


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部