css实现垂直水平同时居中的方法

1.父元素设置成table,子元素设置成table-cell

.father {
    display:table;
    text-align:center;
}

.child {
     display:table-cell;
     vertical-align:middle;
}

*vertical-align:middle ——只对table元素有效


2.利用定位 + transform

.father {
    position:relative;
}

.child {
     position:absolute;
     top:50%;//向下移动父元素高度的一半
     left:50%;//向右移动父元素宽度的一半
     transform:translate(-50%,-50%);//向左移动自身宽度的一半,向上移动自身高度的一半
}

3.定位 + 外边距

如果知道子元素的宽度

.father {
    position:relative;
}

.child {
     position:absolute;
     top:50%;//向下移动父元素高度的一半
     left:50%;//向右移动父元素宽度的一半
     margin-left:-(自身宽度的一半);//向左移动自身宽度的一半
     margin-top:-(自身高度的一半);//向上移动自身高度的一半
}

个人感觉2更好,不用自己计算,且适合响应式的布局


3.flex布局

父元素设置成flex,子元素关于主轴、侧轴居中

.father {
display: flex;
flex-direction: row; 
align-items: center;
justify-content: center;
height: 100vh;//如果要在整个窗口中间
}

4.对于行内元素

父元素设置垂直居中,子元素设置行高等于父盒子高度

.father {
    text-align:center
}

.child {//行内元素
     display:inline;
     position:absolute;
     lineheight:父盒子高度;
}

欢迎交流

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值