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属性相对于其最接近的一个具有定位属性的祖先元素进行绝对定位.如果不存在这样的祖先元素,则 ...
随机推荐
- HIVE外部表 分区表
HIVE外部表 分区表 外部表 创建hive表,经过检查发现TBLS表中,hive表的类型为MANAGED_TABLE. 在真实开发中,很可能在hdfs中已经有了数据,希望通过hi ...
- linux_mysql学习系列
Linux&shell系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html 网站架构系列文章:http://www.cnblogs.co ...
- MYSQL SHOW 用法
1.SHOW CHARACTER SET 显示所有可用的字符集 mysql> SHOW CHARACTER SET LIKE 'utf8'; +---------+--------------- ...
- 大话数据结构(8) 串的模式匹配算法（朴素、KMP、改进算法）
--喜欢记得关注我哟[shoshana]-- 目录 1.朴素的模式匹配算法2.KMP模式匹配算法 2.1 KMP模式匹配算法的主体思路 2.2 next[]的定义与求解 2.3 KMP完整代码 2.4 ...
- work note
eclipse git 察看历史 左边是提交的 import { NgModule } from '@angular/core'; import { IonicPageModule } from 'i ...
- Linux系列（14）之工作管理
1.工作管理 说明:工作管理(job control)是用在bash环境下的,也就是说:“当我们登录系统取得bash shell之后,在单一终端机接口下同时进行多个工作的行为管理”.举例说明,我们在登 ...
- Python 第一节随堂练习
作业: 1 从键盘输入一个整数,判断该数字能否被2和3同时整除,能否被2整除,能否被3整除,不能被2和3整除,输出相应信息 1 my_num = int(input('请输入一个整数')) 2 if ...
- python中sort和sorted用法的区别
Python list内置sort()方法用来排序,也可以用python内置的全局sorted()方法来对可迭代的序列排序生成新的序列 一,最简单的排序 1.使用sort排序 my_list = [3 ...
- varnish 子程序流程
VCL中主要动作: pass:当一个请求被pass后,这个请求将通过varnish转发到后端服务器,该请求不会被缓存,后续的请求仍然通过Varnish处理.pass可以放在vcl_recv 和vcl_ ...
- 空间变换网络(STN)原理+2D图像空间变换+齐次坐标系讲解
空间变换网络(STN)原理+2D图像空间变换+齐次坐标系讲解 2018年11月14日 17:05:41 Rosemary_tu 阅读数 1295更多 分类专栏: 计算机视觉 版权声明:本文为博主原 ...