水平居中 || 垂直居中 || 水平垂直居中的几种常见方式

阿玲玲啊
阿玲玲啊 发布于 6 天前 浏览:150 类型:原创 - 随笔 分类:HTML/CSS - html/css 二维码: 作者原创 版权保护
1.未知宽高垂直居中
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>未知宽高div在页面内水平垂直居中</title>
<style>
<!--*{margin:0; padding:0;}
body,html{overflow:hidden; height:100%;}
.box {height: 100%; overflow: hidden; position: relative; width: 100%; display: table;}
.middle {top:50%;text-align:center;display: table-cell; vertical-align: middle; *position:absolute; *left:50%;}
.content{border:#09F solid 1px; margin:0 auto; top:-50%;}-->
*{margin:0; padding:0;}
body,html{overflow:hidden; height:100%;}
.box {height: 100%; overflow: hidden; position: relative; width: 100%; display: table;}
.middle {top:50%;text-align:center;display: table-cell; vertical-align: middle; *position:absolute; *left:50%;}
.content{border:#09F solid 1px; margin:0 auto; position:relative; top:-50%;font:12px/2 "Microsoft YaHei"; padding:0 10px; display:table; *left:-50%;}
</style>
</head>

<body>
<div class="box">
        <div class="middle">
        <div class="content">未知宽高div在页面内水平垂直居中</div>
    </div>
</div>
</body>
</html>


2.百分比宽高div,水平垂直居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百分比宽高在浏览器中水平垂直居中</title>
</head>
<style>

html,body { margin:0; padding:0; height:100%; font:12px/180% "宋体"; text-align:center;}
#main {
width:50%;
height:50%;
background-color:#ddd;
position:absolute;
top:50%;
margin:auto;    
left:0;
right:0;
top:0;
bottom:0;
}
</style>
<body>
<div id="main">
  百分比宽高水平及垂直居中
</div>
</body>
</html>

3.已知宽高div 水平垂直居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>宽高固定的容器如何在浏览器中水平垂直居中</title>
</head>
<style>

html,body { margin:0; padding:0; height:100%; font:12px/180% "宋体"; text-align:center;}
#main {
 width:200px;
 height:20px;
 background-color:#ddd;
 position:relative;
 top:50%;
 margin:-10px auto 0 auto;    
 /*   margin-top=-(height/2);   */
}
</style>
<body>
<div id="main">
  传说中的水平及垂直居中
</div>
</body>
</html>

4、多行文本垂直居中
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多行文本居中</title>
<style>
body,div,p,span{margin:0; padding:0;}
.box{width:300px; height:300px; border:#666 solid 1px; font-size:0; margin:100px auto;}
.box span{display:inline-block; height:100%; width:0;background:red; vertical-align:middle;}
.text{vertical-align:middle; display:inline-block;word-break:break-all; font-size:14px; *display:inline; zoom:1;}
</style>
</head>
 
<body>
<div class="box">
        <span></span>
    <p class="text">多行文本水平垂直居中多行文本水平垂直居中多行文本水平垂直居中多行文本水平垂直居中多行文本水平垂直居中多行文本水平垂直居中多行文本水平垂直居中多行文本水平垂直居中多行文本水平垂直居中多行文本水平垂直居中多行文本水平垂直居中多行文本水平垂直居中多行文本水平垂直居中多行文本水平垂直居中多行文本水平垂直居中多行文本水平垂直居中多行文本水平垂直居中多行文本水平垂直居中多行文本水平垂直居中多行文本水平垂直居中多行文本水平垂直居中多行文本水平垂直居中</p>
</div>
</body>
</html>

5水平居中的五种方式(父子容器宽度不一定)
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>horizontal center</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.parent{
			width: 200px;
			height: 100px;
			margin: 20px;
			background-color: yellow;
		}
		.child{
			background-color: green;
		}
		/*these four ways can be adapted to unknown width of parent/child container*/
		/*first way*/
		.parent-a{
			text-align: center;
		}
		.child-a{
			display: inline-block;
		}
		/*second way*/
		.child-b{
			display: table;/*its width ups to its content*/
			margin: 0 auto;
		}
		/*third way, ie9+*/
		.parent-c{
			display: flex;
		}
		.child-c{
			margin: 0 auto;
		}
		/*fourth way*/
		.parent-d{
			display: flex;
			justify-content: center;
		}
		/*fifth way*/
		.parent-e{
			position: relative;
		}
		.child-e{
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}
	</style>
</head>
<body>
	<div class="parent parent-a">
		<div class="child child-a">demo-a</div>
	</div>
	<div class="parent parent-b">
		<div class="child child-b">demo-b</div>
	</div>
	<div class="parent parent-c">
		<div class="child child-c">demo-c</div>
	</div>
	<div class="parent parent-d">
		<div class="child child-d">demo-d</div>
	</div>
	<div class="parent parent-e">
		<div class="child child-e">demo-e</div>
	</div>
</body>
</html>

6.垂直居中的三种方式(父子容器高度不一定)
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>vertical center</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.parent{
			width: 200px;
			height: 100px;
			margin: 20px;
			background-color: yellow;
		}
		.child{
			background-color: green;
		}
		/*the three ways can be adapted to unknown height of parent/child container*/
		/*first way*/
		.parent-a{
			position: relative;
		}
		.child-a{
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}
		/*second way*/
		.parent-b{
			display: flex;
			align-items: center;
		}
		/*third way*/
		.parent-c{
			display: table-cell;
			vertical-align: middle;
		}
	</style>
</head>
<body>
	<div class="parent parent-a">
		<div class="child child-a">demo-a</div>
	</div>
	<div class="parent parent-b">
		<div class="child child-b">demo-b</div>
	</div>
	<div class="parent parent-c">
		<div class="child child-c">demo-c</div>
	</div>
</body>
</html>




7.制作css透明边框且垂直居中的弹出框
<!DOCTYPE html>
<html><head><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>制作css透明边框且垂直居中的弹出框</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
</head>
<style>
*{margin:0;padding:0;}
#dialog{position:fixed;_position:absolute;left:50%;top:50%;z-index:99;display:none;}
.box{
position:relative;
width:600px;
height:300px;
margin:-150px auto auto -300px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:5px solid rgba(0,0,0,.1);
}
.close{position:absolute;top:10px;right:10px;cursor:pointer;}
.box_con{
padding:10px;
height:278px;
border:1px solid #c4c4c4;
background-color:#fff;
}
.mask_layer{
width:100%;
height:100%;
position:fixed;
_position:absolute;
background:#000;
opacity:.3;
filter:alpha(opacity=30);
left:0;
top:0;
right:0;
bottom:0;
display:none;
}
</style>
<body>
<div class="click">点击我弹出一个对话框</div>
<div id="dialog">
        <div class="box">
                <div class="close">X</div>
                <div class="box_con">我是透明圆角边框的弹出框,垂直居中在浏览器中!</div>
        </div>
</div>
<div class="mask_layer"></div>
</body>
</html>

<script>
$(function(){
$(".close").click(function(){
$("#dialog").hide();
$(".mask_layer").hide();
});
$(".click").click(function(){
$("#dialog").show();
$(".mask_layer").show();
});
});
</script>


8、图片垂直局总
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:800px; margin:0 auto; height:600px;border:2px solid #000; text-align:center;}
span{ display:inline-block; height:100%; vertical-align:middle;}
img{ vertical-align:middle;}
</style>
</head>
<body>
<h3><center>图片垂直居中二</center></h3>
<div class="box">
	<img src="http://www.w3cfuns.com/data/attachment/album/201408/19/004625t5du798d0fyskowc.jpg" /><span></span>
</div>
</body>
</html>
z
给个赞 1 人点赞
收藏 3 人收藏
评论 已有 0 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
还没有任何评论呢,赶紧抢先来一发吧!
阿玲玲啊 阿玲玲啊 作者

作者最新