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属性相对于其最接近的一个具有定位属性的祖先元素进行绝对定位.如果不存在这样的祖先元素,则 ...
随机推荐
- 【ARM-Linux开发】【Qt开发】Qt Creator自定义编译运行步骤
原文:http://www.linuxidc.com/Linux/2015-04/115763.htm 一直用Qt Creator开发.无它,只是因为linux下C++ IDE选择不多.同时因为我抛弃 ...
- 【并行计算-CUDA开发】 NVIDIA Jetson TX1
概述 NVIDIA Jetson TX1是计算机视觉系统的SoM(system-on-module)解决方案.它组合了最新的NVIDIAMaxwell GPU架构,其具有ARM Cortex-A57 ...
- Python openCV基础操作
1.图片加载.显示和保存 import cv2 # 读取图片 img = cv2.imread("img1.jpg") # 生成灰色图片 imgGrey = cv2.imread( ...
- WebForm——浅拷贝与深拷贝
注:本文整理来自连接 https://www.cnblogs.com/echolun/p/7889848.html ,感谢博主的分享 总结: 1.浅拷贝:只拷贝变量的名,而不拷贝变量的值——常为引用类 ...
- windows下使用命令行编译、链接C++源文件
目录 1.流程 2.操作 1.流程 .cpp-->.o-->.exe 分别为 源文件-->中间目标文件-->可执行文件 两个-->的过程分别为编译.链接 p.s.多个 . ...
- 【洛谷】P4883 mzf的考验
[洛谷]P4883 mzf的考验 最近忽然放弃治疗开始随机跳题了 感觉还行 就是必须吸氧感觉有点糟糕... 这题翻转和求和都是平衡树基本操作,那个异或可以通过维护树中\(2\)进制下第\(2^{i}\ ...
- 【Python基础】09_Python中的元组
1.元组的定义 Tuple (元组)与列表类似,元组的元素 不能修改 元组通常保存 不同类型 的数据 元组用()定义 info_tuple = ("张三", 18, 1.75) 定 ...
- 第十二章 ZYNQ-MIZ701 PL中断请求
本篇文章主要介绍外设(PL)产生的中断请求,在PS端进行处理. 在PL端通过按键产生中断,PS接受到之后点亮相应的LED. 本文所使用的开发板是Miz701 PC 开发环境版本:Vivado 20 ...
- 11-MySQL DBA笔记-MySQL的监控
第11章 MySQL的监控 为什么我们需要监控呢?因为如果没有了监控,那么我们的服务可用性就无从度量,我们也无法及时地发现问题和处理问题.一个完善的监控体系,不仅需要进行实时的监控,也需要分析历史的监 ...
- H5的本地存储（localStorage）和cookie比较
HTML5 的 web Storage 存储方式有两种:localStorage 和 sessionStorage. sessionStorage就像是会话级别的cookie,数据会随着浏览器关闭而清 ...