CSS基础学习 21.CSS居中总结
注意：*在IE中并不代表通配符的意思，是代表根元素的意思，所以为了匹配适应各种浏览器，进行页面初始化
<style>
*{
margin:0;
padding:0;
}
</style>
用以下形式代替
<style>
html,body{
margin:0;
padding:0;
}
</style>
1.盒子居中 margin:0 auto;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body{
margin: 0;
padding: 0;
}
.container{
width: 100%;
min-width: 996px;/*设置最小宽度，缩小到最小宽度996px的时候就不再压缩内容了*/
height: 70px;
background-color: aquamarine;
}
.header{
width: 80%;
height: 70px;
background-color: blueviolet;
min-width: 996px;
}
</style>
</head>
<body>
<div class="container">
<div class="header"></div>
</div>
</body>
</html>
设置margin:0 auto;让盒子居中
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body,ul{
margin: 0;
padding: 0;
}
.container{
width: 100%;
min-width: 996px;/*设置最小宽度，缩小到最小宽度996px的时候就不再压缩内容了*/
height: 70px;
background-color: aquamarine;
}
.header{
width: 80%;
height: 70px;
background-color: blueviolet;
min-width: 996px;
margin:0 auto; /*上下为0，左右为自适应*/
}
</style>
</head>
<body>
<div class="container">
<div class="header">
</div>
</div>
</body>
</html>
2.文字居中 line-height;text-align:center;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body,ul{
margin: 0;
padding: 0;
}
.container{
width: 100%;
min-width: 996px;/*设置最小宽度，缩小到最小宽度996px的时候就不再压缩内容了*/
height: 70px;
background-color: aquamarine;
}
.header{
width: 80%;
height: 70px;
background-color: blueviolet;
min-width: 996px;
margin:0 auto; /*上下为0，左右为自适应*/
}
ul li{
display: inline-block;/*内联块级元素和其他元素都在一行上*/
list-style-type: none;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<ul>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
</ul>
</div>
</div>
</body>
</html>
line-height;text-align:center;设置文字居中
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body,ul{
margin: 0;
padding: 0;
}
.container{
width: 100%;
min-width: 996px;/*设置最小宽度，缩小到最小宽度996px的时候就不再压缩内容了*/
height: 70px;
background-color: aquamarine;
}
.header{
width: 80%;
height: 70px;
background-color: blueviolet;
min-width: 996px;
margin:0 auto; /*上下为0，左右为自适应*/
text-align: center;/*水平居中*/ }
ul{
line-height: 70px;/*垂直居中*/
}
ul li{
/*float: left;*//*会脱离文档流，这时不能用text-align: center;设置水平居中*/
display: inline-block;/*内联块级元素和其他元素都在一行上*/
list-style-type: none;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<ul>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
</ul>
</div>
</div>
</body>
</html>
3.由table演变来的一种居中
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.t{
width: 200px;
height: 200px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="t">
<p>哈哈</p>
</div>
</body>
</html>
用table设置水平垂直居中
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.t{
display: table;/*外层div变为table*/
width: 200px;
height: 200px;
background-color: aquamarine;
}
p{
display: table-cell;/*设置为单元格*/
text-align: center;/*水平居中*/
vertical-align: middle;/*垂直居中*/
}
</style>
</head>
<body>
<div class="t">
<p>哈哈</p>
</div>
</body>
</html>
4.利用伸缩盒居中
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.outer{
width: 200px;
height: 200px;
background-color: aquamarine;
}
.inner{
width: 100px;
height: 100px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
哈哈
</div>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.outer{
display: -webkit-box;/*设置为盒子*/
width: 200px;
height: 200px;
background-color: aquamarine;
-webkit-box-pack:center;/*水平居中*/
-webkit-box-align:center;/*垂直居中*/
}
.inner{
width: 100px;
height: 100px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
哈哈
</div>
</div>
</body>
</html>
接下来设置文字居中
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.outer{
display: -webkit-box;/*设置为盒子*/
width: 200px;
height: 200px;
background-color: aquamarine;
-webkit-box-pack:center;/*水平居中*/
-webkit-box-align:center;/*垂直居中*/
}
.inner{
display: -webkit-box;/*设置为盒子*/
-webkit-box-pack:center;/*水平居中*/
-webkit-box-align:center;/*垂直居中*/
width: 100px;
height: 100px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
哈哈
</div>
</div>
</body>
</html>
CSS基础学习 21.CSS居中总结的更多相关文章
- CSS基础学习 20.CSS媒体查询
- CSS基础学习 19.CSS hack
- CSS基础学习 18.CSS多列
四种常见的浏览器内核:
- CSS基础学习 17.CSS动画
- CSS基础学习 16.CSS过渡
- CSS基础学习-15-1.CSS 浏览器内核
- CSS基础学习-14 CSS visibility与overflow属性
- CSS基础学习-13.CSS 浮动
如果前一个元素设置浮动属性,则之后的元素也会继承float属性,我觉得这里说是继承不太对,可以理解为会影响到之后的元素,所以在设置浮动元素之后的元素要想不被影响就需要清除浮动.元素设置左浮动,则清除左 ...
- CSS基础学习-12.CSS position
绝对定位 position:absolute,元素脱离文档流,然后使用left.right.top.bottom属性相对于其最接近的一个具有定位属性的祖先元素进行绝对定位.如果不存在这样的祖先元素,则 ...
随机推荐
- thinkphp5 默认配置代码
<?php // +---------------------------------------------------------------------- // | ThinkPHP [ ...
- linux支持并发的服务器回射程序实例
实例一:不支持并发,单服务器---单客户端 /************************************************************************* > ...
- 学习笔记：CentOS7学习之十五： RAID磁盘阵列的原理与搭建
目录 学习笔记:CentOS7学习之十五: RAID磁盘阵列的原理与搭建 14.1 RAID概念 14.1.1 RAID几种常见的类型 14.1.2 RAID-0工作原理 14.1.3 RAID-1工 ...
- poj1222（高斯消元法解异或方程组+开关问题）
题目链接:https://vjudge.net/problem/POJ-1222 题意:给定一个5×6的01矩阵,改变一个点的状态时它上下左右包括它自己的状态都会翻转,因为翻转2次等价与没有翻转,那么 ...
- ORACLE initialization or shutdown in progress 错误解决办法
第一步,运行cmd 第一步.sqlplus /NOLOG第二步.SQL>connect sys/change_on_install as sysdba'/提示:已成功第三步.SQL>shu ...
- RabbitMQ快速开始
①:安装rabbitmq所需要的依赖包 yum install build-essential openssl openssl-devel unixODBC unixODBC-devel make g ...
- 20190716-Python网络数据采集/第 2 章 复杂HTML解析
# P29/9# 解析,要考虑到可持续性问题,对方反爬修改后,仍继续有效,方为优秀代码# 解析一个目标网页前,需要做到以下几点:(1)明确目标内容:(2)寻找“打印此页”的链接,或查看网站有无HTML ...
- linux的定时器（timer_create，timer_gettime，timer_delete，SIGEV_SIGNAL）
ref : http://blog.chinaunix.net/uid-28458801-id-5035347.html 系统中的一个模块需要频繁的获取系统时间,使用linux中内置的函数开销过大 ...
- mysql replace substring 字符串截取处理
SELECT a1,a2,replace(a2, "豫ICP备16006180号-", "") a22,a3,a4,a5 FROM `aaab` order b ...
- Javascript中的继承与复用
实现代码复用的方法包括:工厂模式.构造函数模式.原型模式(<高三>6.2章 P144),它们各自的特点归结如下:1.工厂模式虽然使创建对象一定程度上实现了代码复用,但却没有解决对象识别问题 ...