<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*脱离文档流元素的居中*/
/*最基本的水平竖直居中 -100 -100 分别是宽高一半的负值*/
/* div{
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}*/
/*最基本的水平竖直居中*/
/*
优点:
1.支持跨浏览器,包括IE8-IE10.
2.无需其他特殊标记,CSS代码量少
3.支持百分比%属性值和min-/max-属性
4.只用这一个类可实现任何内容块居中
5.不论是否设置padding都可居中(在不使用box-sizing属性的前提下)
6.内容块可以被重绘。
7.完美支持图片居中。
缺点:
1.必须声明高度(查看可变高度Variable Height)。
2.建议设置overflow:auto来防止内容越界溢出。(查看溢出Overflow)。
3.在Windows Phone设备上不起作用
绝对定位方法在最新版的Chrome,Firefox, Safari, Mobile Safari, IE8-10.上均测试通过。
详细http://blog.csdn.net/freshlover/article/details/11579669
div{
position: absolute;
width: @width; // 宽度值
height: @height; // 高度值
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}*/
/*未脱离文档流元素的居中*/
/*div{
width: 300px;
height: 300px;
border: 3px solid #555;
display: table-cell;
vertical-align: middle;
text-align: center;
}
img{
vertical-align: middle;
}*/
/*①css3实现水平竖直居中*/
/* div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}*/
/*flex实现水平竖直居中*/
/* 1.设置container的display的类型为flex,激活为flexbox模式。
2.justify-content定义水平方向的元素位置
3.align-items定义垂直方向的元素位置
.container{
display: flex;
justify-content: center;
align-items: center;
}*/
/*水平居中*/
/*
1.最常用的方式,使用margin:0 auto;(即margin-left:auto;margin-right:auto).前提是需要知道元素的width。也就是说元素要是display:block
2.使用display:inline-block;样式使元素转为内链元素,可以设置width属性(如果不设置即为内容大小宽度)。注意:需要给其父元素添加样式text-align:center。(意思就和文本居中雷同)
3. div{ position:absolute; left:50%; margin-left:-100px}
4.div{ position:absolute; left:50%; -webkit-transform:translate(-50%)}
*/
/*②flex单行水平居中*/
/* body{
display: flex;
justify-content: center;
}*/
/*③flex多行水平居中*/
/* body{
display: flex;
justify-content: center;
flex-wrap: wrap/wrap-reverse;
}*/
/*④css3竖直居中 (VH为窗口高度单位,1vh等于viewport高的的1%)*/
/* div{
margin-top:calc( (100vh - 200px)/2);
}*/
/*⑤利用line-height(行高法),只针对文字 无例子 需要的话自行看MDN 看介绍*/
/*总结一下从css2进化到css3的所有垂直居中方法
1.flex法,父元素添加 display: flex; 子元素添加 margin: auto;
2.利用calc() 数值计算
3.box法,子元素添加 display: (-webkit-/-moz-/-ms-)box; box-orient: horizontal; box-pack: center; box-align: center;
4.模拟表格,父元素添加 display: table; 子元素添加 display: table-cell; vertical-align: middle
5.利用padding或margin(边距法)
6.利用line-height和height相同(行高法),只针对文字 ;
*/
</style>
</head>
<body>
<!-- <div style="width:200px;height:200px;border:1px solid #000"></div> ① ② ④-->
<!-- ③
<div style="width:200px;height:200px;border:1px solid #000"></div>
<div style="width:200px;height:200px;border:1px solid #000"></div>
-->
<!-- 未脱离文档流元素的居中-->
<!--<div>
<img src="mm.jpg">
</div>
-->
<!--容器内的元素将会居中-->
<!-- <div class="container">
<img src="fireworks.jpg" alt="fireworks">
</div> -->
</div>
</body>
</html>
<script>
</script>
css 水平/竖直/水平竖直方法大全
最新推荐文章于 2022-07-27 09:10:14 发布