CSS 实现垂直居中的几种方法(必看)

作者：佚名字体：[增加减小] 来源：互联网时间：2017-08-06

本文主要包含CSS,垂直居中等相关知识,佚名希望在学习及工作中可以帮助到您

最近在学关系型数据库相关，MySQL 和 Postgre,捎带着学了 PHP，为了练手这几天就忙着自己搭博客，项目部署在某云上，该云算是良心，给的空间自己搭博客用足够了。本来想着每日一bo的,所以有的时候实在来不及就只能隔天更新了。以后尽量发点东西出来，等博客搭完写一写 SQL 数据库基础相关的分享，给跟我一样的小白道友们做下参考，大神请直接无视~

说到居中，很多人第一反应应该是水平居中，说到水平居中，肯定道友们有一万种方法做到，CSS3 的FlexBox更是强大到没朋友。但是良辰今天想聊的是 CSS 垂直居中的方法，下面是萌萌的分割线。神马？你敢说不萌？

•方式一：table 布局方法

•直接上🐴：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
.container{
width: 200px;
height: 200px;
font-weight:bold;">deepskyblue;
display: table;
}
.cell{
display: table-cell;
vertical-align: middle;
font-weight:bold;">lawngreen;
}
.content{
font-weight:bold;">yellow;
}
</style>
<div class="container">
<div class="cell">
<div class="content">
Content
</div>
</div>
</div>
</body>
</html>

效果：

•分析

•优点：content 高度可以动态改变，无须担心父级容器高度不够被截断；

•缺点：IE8 还没搞定。　　

•方式二：布局对象固定高度

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vertical-center</title>
</head>
<body>
<style>
.container{
width: 200px;
height: 200px;
background-color: #003366;
position: relative;
text-align: center;

您可能想查找下面的文章:

2017-08-06favicon.ico在ie下面无法正常显示(尺寸32*32)
2017-08-06css控制文字自动换行的实现方法
2017-08-06css Sub-Pixel Bug?!
2017-08-06IE6支持max-width/height与min-width/height(完美解决方案)
2017-08-06在input中右边加上一个图标的css样式
2017-08-06float元素浮动后高度不一致导致错位的解决办方法
2017-08-06css实现鼠标悬停时滑出层提示的方法
2017-08-06display和visibility的区别
2017-08-0635款精致的 CSS3 和 HTML5 网页模板推荐
2017-08-06select默认样式美化代码兼容移动端和pc端

CSS 实现垂直居中的几种方法(必看)

您可能想查找下面的文章:

相关文章

文章分类

最近更新的内容