css 文字和子元素水平垂直居中
关于水平垂直居中，这是一个很简单的问题，但是很多时候，往往简单的东西，反而做不出来。这就是基础不扎实的缘故吧，我参照一些资料，总结了水平垂直居中的几种方法如下：
1 .文字水平垂直居中
这个比较简单，只要分别设置水平集中和垂直居中即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style lang="">
div{
width:500px;
height:100px;
background: #ccc;
text-align:center;
line-height: 100px;
}
</style>
</head>
<body>
<div>
I am huanying2015!
</div>
</body>
</html>
2.水平垂直居中
2.1 把父元素设置成相对定位，子元素设置成绝对定位，margin为auto,left/right/top/bottom都分别设置为0；（备注：如果不是图片，是其他子元素的话，要设定子元素的宽和高，否则显示不出来，行内元素（inline）是没有宽高的，会聚集到最中央的一点去）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style lang="">
.box{
width:500px;
height:500px;
background: #ccc;
margin:30px auto;
position:relative;
}
img{
position:absolute;
margin:auto;
left:0;
right:0;
top:0;
bottom: 0;
} </style>
</head>
<body>
<div class="box">
<img src="picture.jpg" alt="">
</div>
</body>
</html>
分析：子元素的上下左右（top/bottom/left/right）都设置为0，margin设置为auto;从四个方向进行定位，可以形象的看作是从四面拉扯，最终在中间进行平衡~~，形象一点，可以叫做四面拉扯法或者四点定位法
2.2 子元素居中，从原理上进行定位：
父元素设置position为relative;元素设置为absolute;要居中定位，实际上是要找子元素的起始点的位置，也就是左上角的点位置；一个元素，起始点定了，加上它本身的高和宽，这个元素就定型了；父元素的width/height，相当于子元素的left/top;子元素在父素中的定位，实际上就是本身margin的变化，这样，就可以找到子元素的起始点了：
子y = top*50% - margin-top*50%; 子x = left*50%- margin-left*50%；代码表示如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style lang="">
.box{
width:500px;
height:500px;
background: #ccc;
margin:30px auto;
position:relative;
}
.child{
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px;
background: #666;
}
</style>
</head>
<body>
<div class="box">
<span class="child"></span>
</div>
</body>
</html>
2.3 采用table的属性，将父元素设置display:table-cell;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style lang="">
.box{
width:500px;
height:500px;
background: #ccc;
display:table-cell;
vertical-align:middle;
text-align:center;
margin:30px auto;
position:relative;
}
.child{
display:inline-block;
width:200px;
height:200px;
background: #666;
}
</style>
</head>
<body>
<div class="box">
<span class="child"></span>
</div>
</body>
</html>
2.4 采用盒子模型flex;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style lang="">
.box{
width:500px;
height:500px;
background: #ccc;
margin:30px auto;
position:relative;
display:flex;
display:-webkit-flex;
align-items:center;
-webkit-align-items:center;
justify-content:center;
}
.child{
width:200px;
height:200px;
background: #666;
}
</style>
</head>
<body>
<div class="box">
<span class="child"></span>
</div>
</body>
</html>
2.5 采用Css3 的 transform 的translate属性进行水平垂直居中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style lang="">
.box{
width:500px;
height:500px;
background: #ccc;
margin:30px auto;
position:relative;
}
.child{
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
background: #666;
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="box">
<span class="child"></span>
</div>
</body>
</html>
运行结果：
css 文字和子元素水平垂直居中的更多相关文章
- CSS未知宽高元素水平垂直居中
方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...
- CSS中怎么设置元素水平垂直居中？
记录怎么使用text-align与vertical-align属性设置元素在容器中垂直居中对齐.text-align与vertical-align虽然都是设置元素内部对齐方式的,但两者的用法还是有略微 ...
- CSS多种方式实现元素水平垂直居中
html结构: <div class="center">确定宽高水平垂直居中</div> <div class="center2" ...
- css实现块级元素水平垂直居中的方法？
父级给相对定位,子级给绝对定位,margin设置为auto,上下左右值设为0. 父级给相对定位,子级给绝对定位,设置left和top为50%,再向左和向上移动负的子级一半. 父级设置display:f ...
- css 常用的绝对定位元素水平垂直居中的方法
两种方法都能够实现: 1. div { height:80%; /*一定要设置高度*/ overflow:hidden;/*建议设置*/ margin: auto; position: absolut ...
- css 实现元素水平垂直居中总结5中方法
个人总结,如有错误请指出,有好的建议请留言.o(^▽^)o 一.margin:0 auto:text-align:center:line-height方法 <div id="divAu ...
- CSS元素水平垂直居中方法总结（主要对大漠以及张鑫旭博客所述方法进行了归纳）
本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE ...
- css进阶 04-如何让一个元素水平垂直居中？
04-如何让一个元素水平垂直居中? #前言 老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多. 你也许能顺手写出好几种实现 ...
- CSS实现文字和图片的水平垂直居中
关于文字和图片的水平垂直居中,在前端界绝对算是一个老生常谈的问题了,尤其是垂直居中,什么千奇百怪的解法都能想的出来.下面我就总结一些比较常用的方法: 一.文本的水平垂直居中: 1.水平居中: 是不是很 ...
随机推荐
- SpringMVC第四篇【参数绑定详讲、默认支持参数类型、自定义参数绑定、RequestParam注解】
参数绑定 我们在Controller使用方法参数接收值,就是把web端的值给接收到Controller中处理,这个过程就叫做参数绑定- 默认支持的参数类型 从上面的用法我们可以发现,我们可以使用req ...
- [01] Pattern类和Matcher类
在Java中,有个java.util.regex包,这是一个用正则表达式所订制的模式来对字符串进行匹配工作的类库包. 它主要有两个类: Pattern 一个正则表达式经编译后的表现模式,可以理解为 ...
- mybatis-resultMap使用与详解
1,当数据库的字段名与属性名称不一致时,在mybatis中如何处理? 第一种方式: 采用投影对字段重命名<select id="load" parameterType=&qu ...
- MySQL 经典面试题
MySQL 面试 1 存储过程 什么是存储过程 存储过程是一些编译好的SQL语句 因为系统在调用SQL的时候比较浪费时间,所以之前先将一些基本的额SQL语句代码进行编译(对单表或多表的增删改查),然后 ...
- pycharm 2017新建文件添加编码方式等
file->setting->Editor->File and Code Templates->Python Script 添加 #!/usr/bin/python3# -*- ...
- 用sqlserver的自定义函数直接获取多级部门全名
好久没写存储过程了,今日正好同事的开发需要,实现显示多级部门的部门全名称. 如 财务部/会计部/会计一部 部门表 人员表 函数 getOrgAllName --OrgID 72 当前的部门ID A ...
- mxnet的训练过程——从python到C++
mxnet的训练过程--从python到C++ mxnet(github-mxnet)的python接口相当完善,我们可以完全不看C++的代码就能直接训练模型,如果我们要学习它的C++的代码,从pyt ...
- __无标题栏的窗口拖动___javafx
遇到困难::添加mouseevent监听,我用的mouse_DragedDetected配合MouseEvent.Pressed,,闪的不行,后来借鉴swing的pressed,move,releas ...
- Linux下安装jdk8的详细步骤
一.登录Linux,切换到root用户 sudo su 二.在usr目录下建立java安装目录 cd /usr mkdir java 三.下载jdk 登录网址:http://www.oracle.co ...
- less使用ch1--认识语法
@charset "utf-8"; //注释------------------------------ /*我是可以被编译出来的*/ //不能被编译出来 //变量-------- ...