css3水平垂直居中（不知道宽高同样适用）
css水平垂直居中
第一种方法：
在父div里加：
display: table-cell;
vertical-align: middle;
text-align: center;
内部div设置：
display: inline-block;
代码如下：
<!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>css水平垂直居中</title>
<style>
body {
margin: 0;
} .center {
width: 250px;
height: 250px;
border: 2px solid red;
font-size: 18px; /* 方法1 */
display: table-cell;
vertical-align: middle;
text-align: center;
} .center_inner {
width: 100px;
height: 100px;
background-color: pink; /* 方法1 */
display: inline-block;
}
</style>
</head> <body>
<div class="center">
<div class="center_inner">面朝大海，春暖花开！</div>
<!-- <div class="center_inner center_last">海阔天空</div> -->
</div>
</body> </html>
使父元素内的所有行内元素水平垂直居中（内部div设置display:inline-block即可）。
中间的粉色是居中的div；
若子元素是图像，可不使用table-cell，而是其父元素用行高替代高度，且字体大小设为0。子元素本身设置vertical-align:middle
<style>
.f12 .parent{
line-height: 200px;
text-align: center;
font-size:0;
}
.f12 .child{
vertical-align: middle;
}
</style>
<div class="case-box f12" data-case="f12">
<div class="parent" style=" width:200px;">
<img class="child" src="../../img/head.jpg" style="width:50px;" alt="test">
</div>
</div>
展示效果为把div改为图片
第二种方法：
在居中的div元素里加
/* 第二种方法 */
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
代码如下：
<!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>css水平垂直居中</title>
<style>
.center {
width: 100px;
height: 100px;
background-color: pink;
/* 第二种方法 */
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="center">海阔天空</div>
</body> </html>
translate()函数可以在不知道宽高的情况下，利用它实现水平垂直居中。
translate(-50%, -50%)作用是，往上（X轴），左（Y轴）移动自身长度的50%，以使其居于中心位置。
如果使用top:50%, left:50%,是以左上角为原点，故不处于中心位置；但如果知道宽高,可以
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
第三种方法：用弹性布局实现垂直左右居中
display:flex; 设置.wrap为弹性布局 justify-content:center;定义项目在主轴(水平方向)上居中对齐 align-items:center;定义项目在交叉轴(垂直方向)上居中对齐
代码如下：
<!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>css水平垂直居中</title>
<style>
* {
margin: 0;
padding: 0;
} .center {
width: 200px;
height: 200px;
border: 2px solid red;
margin:40px;
display: flex;
justify-content: center;
align-items: center;
} .inner {
width: 50px;
height: 50px;
background-color: pink;
}
</style>
</head> <body>
<div class="center">
<div class="inner">朝气蓬勃</div>
</div>
</body> </html>
效果图：
如果想让里面的文字也水平垂直居中，在粉红色背景的div加上下面的css属性
display: flex;
align-items: center;
justify-content: center;
第四种方法：绝对定位
在父div里加
position: relative;
在子div里加
position: absolute;
top:0;
left:0;
right: 0;
bottom: 0;
margin: auto;
代码如下：
效果如下：
第五种方法：
在父div里加：
display:table-cell;
vertical-align: middle;
在子div里加：
display: table;
margin: 0 auto;
代码如下：
<!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>test</title>
<style>
#box {
width: 250px;
height: 250px;
background-color: blue;
display: table-cell;
vertical-align: middle;
} .inner {
width: 100px;
height: 100px;
background-color: red; display: table;
margin: 0 auto;
}
</style>
</head> <body>
<div id="box" title="风度翩翩">
<div class="inner">明眸皓齿</div>
</div>
</body> </html>
效果如下：
第六种：flex
在父元素里加
display: flex;
在子元素里加：
margin:auto;
代码如下：
<!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>test</title>
<style>
#box {
width: 250px;
height: 250px;
background-color: yellow;
display: flex;
} .inner {
width: 100px;
height: 100px;
background-color: red; margin: auto;
}
</style>
</head> <body>
<div id="box" title="豁达大度">
<div class="inner">才华横溢</div>
</div>
</body> </html>
效果如下：
第七种方法：grid
在父元素里加：
display: grid;
在子元素里加：
align-self: center;
justify-self: center;
代码如下：
<!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>test</title>
<style>
#box {
width: 250px;
height: 250px;
background-color: yellowgreen;
display: grid;
} .inner {
width: 100px;
height: 100px;
background-color: red; align-self: center;
justify-self: center;
}
</style>
</head> <body>
<div id="box" title="坚韧不拔">
<div class="inner">浑然天成</div>
</div>
</body> </html>
效果如下：
如有疑问请加群，讨论854184700
css3水平垂直居中（不知道宽高同样适用）的更多相关文章
- css3种不知道宽高的情况下水平垂直居中的方法
第一种:display:table-cell 组合使用display:table-cell和vertical-align.text-align,使父元素内的所有行内元素水平垂直居中(内部div设置di ...
- css中：如何让一个图片（不知道宽高，宽高可能比父元素div大），在父元素div内部水平垂直居中，并且不溢出父元素div，且图片不拉伸变形（可等比例缩小）？
欢迎进入:http://www.jscwwd.com/article/list/%E5%85%A8%E9%83%A8 效果图: 不管父元素的宽高怎么变化,图片都是水平垂直居中的,并且不溢出父元素. 注 ...
- [css3]水平垂直居中
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
- CSS3中flexbox如何实现水平垂直居中和三列等高布局
最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.
- css3不定宽高水平垂直居中
1 justify-content:center;//子元素水平居中 2 align-items:center;//子元素垂直居中 3 display:-webkit-flex; 在父级元素上面加上上 ...
- css 水平垂直居中显示（定高不定高定宽不定宽）
position 元素已知宽度 <!DOCTYPE html><html lang="en"><head> <meta charset=& ...
- CSS Transform让百分比宽高布局元素水平垂直居中
很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高是100px,那么就用margin-left:-50px;m ...
- CSS未知宽高元素水平垂直居中
方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...
- 用CSS/CSS3 实现水平居中和垂直居中，水平垂直居中的方式
一.水平居中 (1)行内元素解决方案:父为块元素+text-align: center 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可: 使用te ...
随机推荐
- 二分查找法：x 的平方根
实现 int sqrt(int x) 函数. 由于返回类型是整数,结果只保留整数的部分,小数部分将被舍去. public int mySqrt(int x) { long left=0; long r ...
- Python3学习(18)--偏函数（Partial） --转载存地址
由于最近出差,没有时间更, 倒不是忙,而是费心,项目其实并不难,主要是涉及钱的地方谈技术略显苍白:没有技术解决不了的问题,但是钱没到位,没人愿意无偿给你提供技术,算是停更一周后的,吐槽吧. 赶上今天 ...
- mysql学习（1）----------基础语法
进入mysql mysql -u用户名 -p密码 初始用户为root 初始密码为空 status; 查看当前用户,以及数据库的字符集和其他参数的设置 set db characterset= ...
- *arg,**kwargs的参数作用的疑惑
先来看个例子: def foo(*args, **kwargs): print 'args = ', args print 'kwargs = ', kwargs print '----------- ...
- Failed to start component [StandardEngine[Catalina].StandardHost[localhost].StandardContext[/ssm]]
org.apache.catalina.LifecycleException: Failed to start component [StandardEngine[Catalina].Standard ...
- SpringMVC学习（12）：基于Hibernate+Spring+Spring MVC+Bootstrap的管理系统实现
到这里已经写到第12篇了,前11篇基本上把Spring MVC主要的内容都讲了,现在就直接上一个项目吧,希望能对有需要的朋友有一些帮助. 一.首先看一下项目结构: InfrastructureProj ...
- Nginx 实现 Rewrite 跳转
文章原创于公众号:程序猿周先森.本平台不定时更新,喜欢我的文章,欢迎关注我的微信公众号. 上一篇文章对Nginx的Location配置进行了讲解,本篇主要对于Nginx中的Rewrite跳转进行讲解. ...
- rabbitmq的管理软件以及PHP7安装rabbitmq的
rabbitmq-server管理软件的安装 1.mac下载rabbitmq-server brew install rabbitmq 2.启动服务rabbitmq-server rabbitmq-s ...
- 【记录】Mybatis-Generator 数据层代码生成器，自动生成dao类，mapper，pojo类
Mybatis-Generator 工具来帮我们自动创建pojo类.mapper文件以及dao类并且会帮我们配置好它们的依赖关系. 官方文档地址:http://mybatis.org/generato ...
- 2019HDU多校第三场 Distribution of books 二分 + DP
题意:给你一个序列,你可以选择序列的一个前缀,把前缀分成k个连续的部分,要求这k个部分的区间和的最大值尽量的小,问这个最小的最大值是多少? 思路:首先看到最大值的最小值,容易想到二分.对于每个二分值m ...