css 水平垂直居中显示（定高不定高定宽不定宽）
position 元素已知宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平垂直居中</title>
<style>
.father{
background-color: #FF8C00;
width: 600px;
height:600px;
position: relative;
}
.child{
background-color: rosybrown;
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin: -150px 0 0 -150px;
}
</style>
</head>
<body>
<div class="father">
<div class="child">
hello word!!!
</div>
</div>
</body>
</html>
position 元素未知宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平垂直居中</title>
<style>
.father{
background-color: #FF8C00;
height: 300px;
position: relative;
}
.child{
background-color: #F00;
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%)
}
</style>
</head>
<body>
<div class="father">
<div class="child">
hello word!!!
</div>
</div>
</body>
</html>
position 可以不知道宽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平垂直居中</title>
<style>
.father{
background-color: #FF8C00;
height: 500px;
width: 500px;
position: relative;
}
.child{
background-color: #F00;
width: 200px;
height: 200px;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="father">
<div class="child">
hello word!!!
</div>
</div>
</body>
</html>
flex可以不知道宽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平垂直居中</title>
<style>
.father{
background-color: #FF8C00;
height: 500px;
width: 500px;
display: flex;/*flex布局*/
justify-content: center;/*使子项目水平居中*/
align-items: center;/*使子项目垂直居中*/
}
.child{
background-color: #F00;
width: 200px;
height: 200px; }
</style>
</head>
<body>
<div class="father">
<div class="child">
hello word!!!
</div>
</div>
</body>
</html>
table-cell布局 需要三个标签 相对麻烦 因为table-cell相当与表格的td，td为行内元素，无法设置宽和高，所以嵌套一层，嵌套一层必须设置display: inline-block;td的背景覆盖了橘黄色，不推荐使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平垂直居中</title>
<style>
.father{
background-color: #FF8C00;
height: 500px;
width: 500px;
display: table;
}
.child{
background-color: #F00;
width: 200px;
height: 200px;
display: table-cell;
vertical-align: middle;/*使子元素垂直居中*/
text-align: center;/*使子元素水平居中*/
}
.childInner{
background-color: #;
display: inline-block;/*使子元素呈现块状*/
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="child">
<div class="childInner"> hello word!!!</div>
</div>
</div>
</body>
</html>
css 水平垂直居中显示（定高不定高定宽不定宽）的更多相关文章
- CSS水平垂直居中总结
行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...
- css水平垂直居中
margin法(水平居中) 需要满足三个条件: 元素定宽 元素为块级元素或行内元素设置display:block 元素的margin-left和margin-right都必须设置为auto 三个条件缺 ...
- 把简单做好也不简单-css水平垂直居中
44年前我们把人送上月球,但在CSS中我们仍然不能很好实现水平垂直居中. 作者:Icarus 原文链接:http://xdlrt.github.io/2016/12/15/2016-12-15 水平垂 ...
- css水平垂直居中对齐方式
1.文字或者内联元素的垂直水平居中对齐 css属性 -- 水平居中:text-aligin:center; 垂直居中: line-height:height; 例子:. html: <div c ...
- css 水平垂直居中总结
空闲总结了下水平垂直居中方案,欢迎补充: 水平居中 水平居中有两种情况: 子元素是内联元素 这种那个情况下只需要在父元素定义: text-align:center; 例子: html: //省略了bo ...
- CSS水平垂直居中的几种方法2
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
- CSS水平垂直居中的几种方法
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
- 常见的几种 CSS 水平垂直居中解决办法
用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂 ...
- HTML+CSS水平垂直居中
啦啦啦,好了,今天来分享自己的第一个知识点,难得自己还能想起来过来博客园,写写博客的. 好了,言归正传,今天分享关于html和css的一个简单的知识点,对于大部分从事前端开发的人员来说可能都是很简单的 ...
随机推荐
- 论文笔记：Capsules for Object Segmentation
Capsules for Object Segmentation 2018-04-16 21:49:14 Introduction: ----
- 常用处理数组、字符串API → forEach every some sort map filter slice split indexOf concat substring substr splice join toString replace
Object与Array的语法糖 var arr = [1,2,3]; // [] 是 new Array(1,2,3) 的语法糖(简写) var obj = {'name':2,'age':3}; ...
- Python-ConfigParser获取配置项名称大小写问题
C:\Python27\Lib\ConfigParser.py: def optionxform(self, optionstr): return optionstr.lower() 会将配置文件中的 ...
- Git 提交的正确姿势：Commit message 编写指南
http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html Git 每次提交代码,都要写 Commit message( ...
- web前端关于html转义符的常用js函数
web前端关于html转义符的常用js函数 //去掉html标签 function removeHtmlTab(tab) { return tab.replace(/<[^<>]+? ...
- 51nod 1055 最长等差数列
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1055 题意: 思路:先固定一个位置,然后从该中心点出发向两边扫,确实很难 ...
- openlayers空间点查询之GetFeatureInfo
在map对象上注册点击方法监听, 这里我用的是wms,当然你也可以查询wfs map.events.register('click', map, function (e) { ...
- transient关键字详解
作用 1,一旦变量被transient修饰,变量将不再是对象持久化的一部分,该变量内容在序列化后无法获得访问. 2,transient关键字只能修饰变量,而不能修饰方法和类.注意,本地变量是不能被tr ...
- python3+虹软2.0 离线人脸识别 demo
python3+虹软2.0的所有功能整合测试完成,并对虹软所有功能进行了封装,现提供demo主要功能,1.人脸识别2.人脸特征提取3.特征比对4.特征数据存储与比对其他特征没有添加 虹软SDK下载戳这 ...
- Django 基础介绍
Django 介绍 Python下有许多款不同的 Web 框架.Django是重量级选手中最有代表性的一位.许多成功的网站和APP都基于Django. Django是一个开放源代码的Web应用框架,由 ...