文字实现水平垂直居中

文字实现水平垂直居中的关键代码:

  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  display: -o-box;
  -o-box-orient: horizontal;
  -o-box-pack: center;
  -o-box-align: center;
  display: -ms-box;
  -ms-box-orient: horizontal;
  -ms-box-pack: center;
  -ms-box-align: center;
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;

由于flexbox是CSS3的一个新属性,目前支持的浏览器仅:IE10+, Firefox 2+, Chrome 4+, Safari 3.1+。其他实现方法,大家感兴趣可以参阅:《CSS制作图片水平垂直居中》和《CSS制作水平垂直居中对齐》两篇文章。

如需转载烦请注明出处: http://www.w3cplus.com/codes/vertically-center-content-with-css3.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现文字水平垂直居中,你可以使用以下方法: 1. 使用flexbox布局:将文字所在的容器设置为flex布局,并通过`justify-content: center`和`align-items: center`来水平和垂直居中。 ```css .container { display: flex; justify-content: center; align-items: center; } ``` 然后将文字放置在容器内即可。 2. 使用position和transform属性:将文字所在的容器设置为相对定位(position: relative),然后将文字设置为绝对定位(position: absolute),并通过`top: 50%`和`left: 50%`将文字移动到容器的中心位置。最后,使用`transform: translate(-50%, -50%)`将文字向左上方移动自身宽度和高度的一半,使其完全居中。 ```css .container { position: relative; } .text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 在容器内添加一个具有"text"类的元素,该元素即为要居中文字。 3. 使用table布局:将文字所在的容器设置为table布局,并将容器内的元素设置为table-cell布局。然后使用`vertical-align: middle`将文字垂直居中,使用`text-align: center`将文字水平居中。 ```css .container { display: table; } .text { display: table-cell; vertical-align: middle; text-align: center; } ``` 在容器内添加一个具有"text"类的元素,该元素即为要居中文字。 以上是几种常见的实现文字水平垂直居中的方法,你可以根据具体需求选择其中一种来实现
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值