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的一个简单的知识点,对于大部分从事前端开发的人员来说可能都是很简单的 ...
随机推荐
- jsp+ajax+servlet+jquery从后台取json数据示例
<span style="font-size:18px;"><%@ page language="java" import="jav ...
- Docker中的Cgroup Driver:Cgroupfs 与 Systemd
在安装kubernetes的过程中,会出现 failed to create kubelet: misconfiguration: kubelet cgroup driver: "cgrou ...
- Win10 快捷命令收集
桌面相关 Win+D:显示桌面 Win+Tab:虚拟桌面切换器 Win+Ctrl+D 新建桌面 Win+Ctrl+左/右 :移动虚拟桌面 Win+m :最小化窗口 Win键 + Ctrl + F4 关 ...
- OAuth的MVC实现（微软）
LoginController中: 第三方登陆 public ActionResult LogOn() { string liveUrl = string.Format( "https:// ...
- JavaScript运行机制详解
JavaScript运行机制详解 var test = function(){ alert("test"); } var test2 = function(){ alert(& ...
- http协议的状态码解释
一些常见的状态码为: 200 – 服务器成功返回网页 404 – 请求的网页不存在 503 – 服务器超时 下面提供 HTTP 状态码的完整列表.点击链接可了解详情.您也可以访问 HTTP 状态码上的 ...
- 【十六】php 面向对象
__set()方法: 语法: function __set($property, $value) { //$property接收的属性的名字 //$value接收的是属性的值 } 1 class Em ...
- 封装微信小程序支付
<?php /** * User: Eden * Date: 2019/3/21 * 共有内容 */ namespace Common\Service; use Think\Exception; ...
- PHP里获取一维数组里的最大值和最小值
<?php $arr = ['10','100','50','90','2','5']; $min = min($arr); $max = max($arr); echo $min.PHP_EO ...
- django分页 Paginator
分页功能是几乎所有的网站上都需要提供的功能,当你要展示的条目比较多时,必须进行分页,不但能减小数据库读取数据压力,也有利于用户浏览. Django又很贴心的为我们提供了一个Paginator分页工具, ...