CSS垂直居中和水平居中的几种方法
垂直居中
方法一
这个方法把div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>垂直居中</title>
<style type="text/css">
body{
background:#ccc;
} #wrapper {
display: table; /*here*/
background:blue；
} #container {
display: table-cell; /*here*/
vertical-align: middle; /*here*/
background: yellow;
height:300px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="container">
<p>我要用表格属性垂直居中</p>
<p>我要用表格属性垂直居中</p>
<p>我要用表格属性垂直居中</p>
</div>
</div>
</body>
</html>
实现如图：
能在本身里垂直居中；
优点：
container 可以动态改变高度(不需在 CSS 中定义)。当 wrapper 里没有足够空间时，container 不会被截断
缺点：
Internet Explorer(甚至 IE8 )中无效，许多嵌套标签(其实还好）。
方法二
这个方法使用绝对定位的 div，top 设置为 50％， margin-top 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。
因为有固定高度，或许你想给 content 指定 overflow:auto，这样如果 content 太多的话，就会出现滚动条，以免content 溢出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直居中</title>
<style type="text/css">
body{
background: #ccc;
}
#container {
position: absolute;
top: 50%;
height: 200px;
margin-top: -100px; /* negative half of the height */
background: yellow;
}
</style>
</head> <body>
<div id="container">
<p>我要用绝对定位垂直居中</p>
<p>我要用绝对定位垂直居中</p>
<p>我要用绝对定位垂直居中</p>
</div>
</body>
</html>
效果图：
相对于父元素垂直居中；
优点：
- 适用于所有浏览器
- 不需要嵌套标签
缺点：
- 没有足够空间时，
content会消失(类似div在body内，当用户缩小浏览器窗口，滚动条不出现的情况)
方法三
这个方法使用了一个 position:absolute，有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto;会使它居中。使用 margin:auto;使块级元素垂直居中是很简单的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直居中</title>
<style type="text/css">
body{
background: #ccc;
}
#container {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
height: 200px;
background: yellow;
/*width: 70%;*/
}
</style>
</head> <body>
<div id="container">
<p>我要用绝对定位垂直居中</p>
<p>我要用绝对定位垂直居中</p>
<p>我要用绝对定位垂直居中</p>
</div>
</body>
</html>
效果图：
方法四：将单行文本垂直居中
这个方法只能将单行文本置中。只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直居中</title>
<style type="text/css">
body{
background: #ccc;
}
#container {
height: 100px;
line-height: 100px;
background: yellow;
/*width: 70%;*/
}
</style>
</head> <body>
<div id="container">
<p>我要用绝对定位垂直居中</p>
</div>
</body>
</html>
效果图：
水平居中
方法一：行内元素水平居中
只需要把行内元素包裹在一个属性display为block的父层元素中，并且把父层元素添加如下属性即可：
.parent {
text-align:center;
}
示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>定宽行内元素水平居中</title>
<style>
div{
border:1px solid red;
margin:20px;
}
div.txtCenter,div.imgCenter{
text-align:center;
} </style>
</head> <body>
<div class="txtCenter"><span style='background: #ccc;'>我是文本，哈哈，我想要在父容器中水平居中显示。</span>
<span>我也是行内元素</span>
</div>
<div class="imgCenter"><span>图片是行内块状元素</span></div>
<div class="imgCenter"><img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" /></div>
</body>
</html>
效果图：
方法二：定宽块状元素水平居中
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的
.item {
margin: 10px auto;
}
示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定宽块状元素水平居中</title>
<style>
body{
background: #ccc;
}
div{
border:1px solid red;
width:200px;
margin:20px auto;
} </style>
</head> <body>
<div>我是定宽块状元素，我要水平居中显示。</div>
</body>
</html>
效果图：
方法三：不定宽块状元素水平居中（多个块状元素水平居中）
将元素的display属性设置为inline-block，并且把父元素的text-align属性设置为center即可:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.container{
text-align:center;
background: #ccc;
}
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline-block;
}
.container li{
margin-right:8px;
display:inline-block;
}
</style>
</head> <body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
</html>
效果图：
方法三：不定宽块状元素水平居中
利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
.parent{
display:table;
margin:0 auto;
}
示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.parent,.wrap{
display:table;
margin:0 auto;
}
.parent{
background:yellow;
}
.wrap{
background:#ccc;
}
</style>
</head> <body>
<div class='parent'> <p>我是第一行文本</p>
<p>我是第二行文本</p>
<p>我是第三行文本</p>
</div> <div class="wrap">
设置我所在的div容器水平居中
</div>
</body>
</html>
效果图：
方法四：不定宽块状元素水平居中
通过给父元素设置float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
.container{
float:left;
position:relative;
left:50%
}
.container ul{
position:relative;
left:-50%;
}
示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.container,.wrap{
float:left;
position:relative;
left:50%
} body{
background: #ccc;
}
.container ul,.wrap-center{
background:yellow;
margin:0;
padding:0;
position:relative;
left:-50%;
}
ul,li{
list-style: none;
}
a{
text-decoration:none;
}
.wrap{
clear:both;
}
</style>
</head> <body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div> <!--下面是代码任务区-->
<div class="wrap">
<div class="wrap-center">我们来学习一下这种方法。</div>
</div>
</body>
</html>
效果图：
定宽定高块状元素垂直水平居中
方案一：
父元素设置为：position: relative;
子元素设置为：position: absolute;
距上50%，据左50%，然后减去元素自身宽度的距离就可以实现 top:50%;left:50%;margin:-height/2 0 0 -width/2;
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定宽块状元素水平居中</title>
<style>
body{
background: #ccc;
}
div{
position: absolute;
top: 50%;
left:50%;
height: 200px;
width:200px;
margin: -100px 0 0 -100px; /* negative half of the height */
border:1px solid red;
/*
margin:0 auto;*/
} </style>
</head> <body>
<div>我是定宽块状元素，我要垂直水平居中显示。</div>
</body>
</html>
2.flex布局
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定宽块状元素水平居中</title>
<style>
body{
background: #ccc;
}
div{ height: 400px;
width:400px;
border:1px solid red;
display:flex;
justify-content: center;
align-items: center;
}
p{
height:100px;
width:100px;
border:1px solid blue;
}
</style>
</head> <body>
<div><p>我是定宽块状元素，我要垂直水平居中显示。</p></div>
</body>
</html>
3.表格属性垂直水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>垂直居中</title>
<style type="text/css">
body{
background:#ccc;
} #wrapper {
display: table; /*here*/
border:1px solid yellow;
} #container {
display: table-cell; /*here*/
vertical-align: middle; /*here*/
text-align: center;
/*background: yellow;*/
height:200px;
width:300px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="container">
<p>我要用表格属性垂直水平居中</p>
<p>我要用表格属性垂直水平居中</p>
<p>我要用表格属性垂直水平居中</p>
</div>
</div>
</body>
</html>
CSS垂直居中和水平居中的几种方法的更多相关文章
- css实现垂直水平居中的5种方法
css实现垂直水平居中的5种方法 给父元素设置table-cell,text-align,vertical-align #big{ width: 200px; height: 200px; borde ...
- CSS中隐藏内容的3种方法及属性值
CSS中隐藏内容的3种方法及属性值 (2011-02-11 13:33:59) 在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出 ...
- css划隔横线的两种方法
css划隔横线的两种方法 方法一:用DIV,代码如下:(推荐此方法) <div style="width:800px;height:1px;margin:0px auto;pa ...
- 用 CSS 隐藏页面元素的 5 种方法
原文链接:用 CSS 隐藏页面元素的 5 种方法,转载请注明来源! 用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 disp ...
- 【转】css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？
摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...
- CSS以图换字的9种方法
前面的话 CSS以图换字的技术,很久都没人提起了.它是一种在h1标签内,使用图像替换文本元素的技术,使页面在设计和可访问性之间达到平衡.本文将详细介绍CSS以图换字的9种方法 文字隐藏 在h1标签中, ...
- CSS 隐藏页面元素的 几 种方法总结
用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 display 设为 none 或者将 position 设为 absolu ...
- CSS中隐藏内容的3种方法
CSS中隐藏内容的3种方法 一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出层.隐藏滚动条.清除错位和浮动等. 1.使用display:none来隐藏所有内容 display:none可 ...
- css清除浮动float的几种方法
摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 这里我没有给最外层的DIV.outer 设置高度, ...
随机推荐
- spring依赖注入中获取JavaBean
一.这个接口有什么用? 当一个类实现了这个接口(ApplicationContextAware)之后,这个类就可以方便获得ApplicationContext中的所有bean.换句话说,就是这个类可以 ...
- spark开发环境配置
以后spark,mapreduce,mpi可能三者集于同一平台,各自的侧重点有所不用,相当于云计算与高性能计算的集合,互补,把spark的基础看了看,现在把开发环境看看,主要是看源码,最近Apache ...
- 手把手教你开发Chrome扩展三：关于本地存储数据
手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩展二:为html添加行为 手把手教你开发Chrome扩展三:关于本地存储数据 HTML5 ...
- 用pc构建DIY计算集群
-----------------------------------------------------------------用pc构建DIY计算集群目录/构建计算集群|-- /0前言|-- /1 ...
- storm ——Understanding the Parallelism of a Storm Topology
http://www.michael-noll.com/blog/2012/10/16/understanding-the-parallelism-of-a-storm-topology/ 这篇文章好 ...
- C#.NET如何将cs文件编译成dll文件 exe文件 如何调用dll文件
比如我要把TestDLL.cs文件编译成dll文件,则在命令提示符下,输入下面的命令,生成的文件为TestDLL.dll csc /target:library TestDLL.cs 注意前提是你安装 ...
- UVa 1531 - Problem Bee
题目:如图所看到的的蜂巢型的图中.蜜蜂想从A点飞到B点,假设A与B不在同一个正六边形中, 则它先飞到A的中心.每次飞到相邻格子的中心,最后飞到B的中心,再飞到B点: 假设在一个格子中.直接飞过去就可以 ...
- VC,VB程序button、图标样式美化
此处的"美化"指的不是通过代码进行美化你的程序.关于想进一步优化自己的程序界面的,最好还是去了解下SkinSharp吧.本文提及的是利用第三方资源编辑软件在不更改程序不论什么框架和 ...
- 华为OJ:数字颠倒
将数字转成一个字符串即可了. import java.util.Scanner; public class convertNumber { public static void main(String ...
- java web项目的部署
java web项目的部署 我刚开始学着编写java web项目,着实遇到不少麻烦,感觉JAVA真难侍候,好多东西都是手动.手动. 就拿这个web项目在tomcat上的部署来说吧.我在项目的build ...