CSS——div垂直居中及div内文字垂直居中

　　最近做demo时，经常需要div垂直居中或者让div内文字相对div垂直居中。水平居中比较简单，就不多说了，这里主要记录一下垂直居中的一些方法。

一、div垂直居中的一些方法：

1.当height、width固定大小时，

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>垂直居中</title><style>html,body{margin: 0px;padding: 0px;height: 100%;width: 100%;}.div1{width: 300px;height: 300px;background: red;margin: 0 auto; /*水平居中*/position: relative;top: 50%; /*偏移*/margin-top: -150px;}</style></head><body><div class="div1"></div></body>
</html>

运行结果：

2.当height、width大小是百分比时，有如下三种方法可以实现：

法一：使用CSS3的transform属性

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>垂直居中</title><style>html,body{margin: 0px;padding: 0px;height: 100%;width: 100%;}.div1{height: 30%;width: 30%;background: green;position: relative;top: 50%; transform: translateY(-50%);/* 元素往下位移自身高度50%的距离 */}</style></head><body><div class="div1"></div></body>
</html>

运行效果：

法二：使用CSS3的弹性布局（flex）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>垂直居中</title><style>html,body{margin: 0px;padding: 0px;height: 100%;width: 100%;}.div1{height: 100%;width: 100%;display: flex;/*设置为弹性容器*/align-items: center; /*定义div1的元素垂直居中*/justify-content: center; /*定义div1的里的元素水平居中*/background: green;}.div2{width: 50%;height: 50%;background: red;}</style></head><body><div class="div1"><div class="div2"></div></div></body>
</html>

运行效果：

法三：绝对定位时的一种巧妙方法

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>垂直居中</title><style>html,body{margin: 0px;padding: 0px;height: 100%;width: 100%;}.div1{height: 50%;width: 50%;background: red;position:absolute; /*这里必须是absolute绝对定位*/left: 0;right: 0;top: 0;bottom: 0;margin:auto;}</style></head><body><div class="div1"></div></body>
</html>

运行效果：

二、div内文字相对div垂直居中的一些方法：

1.当height、width固定大小时，有如下两种方法可以实现：

法一：只要保证line-height和height相同，即可保证div内的文字垂直居中

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>文字垂直居中</title><style>html,body{margin: 0px;padding: 0px;height: 100%;width: 100%;}.div1{height: 100px;line-height: 100px;width: 100px;background: red;        }</style></head><body><div class="div1">我的文字1</div></body>
</html>

运行效果：

法二：利用table-cell实现

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>垂直居中</title><style>html,body{margin: 0px;padding: 0px;height: 100%;width: 100%;}.div1{/*这里的宽和高必须固定*/height: 500px; width: 500px;display:table-cell;vertical-align: middle;background: green;            }</style></head><body><div class="div1">文字垂直居中</div></body>
</html>

运行效果：

2.当height、width是百分比大小时，上面的方法就不适用了，用如下方法：

法一：借鉴了CSS3的弹性布局（flex）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>垂直居中</title><style>html,body{margin: 0px;padding: 0px;height: 100%;width: 100%;}.div1{/*这里的宽和高必须固定*/height: 50%; width: 50%;background: red;display: flex;/*设置为弹性容器*/align-items: center; /*定义div1的元素垂直居中*/justify-content: center; /*定义div1的里的元素水平居中*/        }.div2{background: green;}</style></head><body><div class="div1"><div class="div2">文字垂直居中</div></div></body>
</html>

运行效果：

----------------------------------分割线--------------------------------

以上就是我目前知道的一些方法，如果后期还有新的方法，我会及时更新，方便自己，也方便他人。

转载于:https://www.cnblogs.com/FHC1994/p/10558676.html

CSS——div垂直居中及div内文字垂直居中相关推荐

让div中的p标签文字垂直居中的方法
设置父div标签的inline-height属性将inline-height属性的值设置成和div的高度一下就可以简单的实现div中p标签内的文字垂直居中示例如下: html代码 <foot ...
【CSS】CSS元素显示模式display + 网页单行文字垂直居中小技巧
写在前面,作者首页有前端专栏,详细分享相关知识,有兴趣的不妨点个收藏 ~~~~ CSS元素显示模式display 标签显示模式是标签以什么方式进行显示.HTML标签一般分为块标签和行内标签两种类型,它 ...
html不知道高文字垂直居中,css实现固定高度及未知高度文字垂直居中的完美解决方案...
在工做当中咱们常常碰到相似于"固定高度文字垂直居中及未知高度垂直居中问题",或者 "图片垂直居中问题",而咱们最容易会想到使用表格来垂直居中,或者若是是单行文字 ...
CSS - 使表格td中的文字垂直居中
文字垂直居中的有如下的方法方法一: valign:middle // 不推荐使用代码如下: <table> <tbody> <tr> <td valig ...
html的div修改字体,div字体大小_div内文字大小改变css代码
控制div内文字字体大小,其实非常简单,一个CSS样式即可实现,字体大小均能根据需求自由设置.不同div内字体大小根据需求也可用自由改变. 一.字体大小CSS样式 font-size 用法: p{fo ...
div元素里如何实现文字垂直居中
这个问题我经常忘记,所以记录一下 1.水平居中在css标签中,将text-align属性设置为center,实现文字的水平居中. 2.垂直居中将line-height属性设置为180px (与he ...
垂直居中及容器内图片垂直居中的CSS解决方法
方法一: <style type="text/css"> <!-- * {margin:0;padding:0} div { width:500px; h ...
React-Native组件之Text内文字垂直居中方案
1 style: { 2 height: 100, 3 textAlign: 'center', 4 textAlignVertical: 'center', 5 } 以上方法在Android上显示水 ...
html li内文字垂直居中,ul li 下图片文字垂直居中
html代码如下: 首页 cqm8@163.com +86 898 234566 对应的css代码如下: .contact ul li { float: left; display: inline; ...
html 设置button 内文字垂直居中
将button的行高和其列高设置相同即可 height: 30px; line-height: 30px;

CSS——div垂直居中及div内文字垂直居中

CSS——div垂直居中及div内文字垂直居中相关推荐

最新文章

热门文章