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属性相对于其最接近的一个具有定位属性的祖先元素进行绝对定位.如果不存在这样的祖先元素,则 ...
随机推荐
- 2019－10－20 李宗盛 spss作业
SPSS: 1.有关SPSS数据字典的说法,正确的是 A.SPSS数据集的数据字典可以复制到其他数据集中 B.SPSS数据集的数据字典是不能复制的 C.SPSS的数据字典可以通过“复制”和“粘贴”在不 ...
- 后端根据查询条件生成excel文件返回给前端，vue进行下载
一.HTML代码 <el-col :xs="2" :md="2" :sm="3"> <el-button type=&qu ...
- Spring 视图层如何显示验证消息提示
1.示例 <p th:if="${#fields.hasErrors('name')}" th:errors="*{name}" ></p&g ...
- [转帖]四个修改Docker默认存储位置的方法
四个修改Docker默认存储位置的方法 https://blog.51cto.com/forangela/1949947 易改乾坤关注0人评论27435人阅读2017-07-22 09:18:48 ...
- 剪花布条 HDU - 2087（kmp,求不重叠匹配个数）
Problem Description 一块花布条,里面有些图案,另有一块直接可用的小饰条,里面也有一些图案.对于给定的花布条和小饰条,计算一下能从花布条中尽可能剪出几块小饰条来呢? Input 输入 ...
- nginx访问量统计 日常分析
nginx访问量统计 0.查询某个时间段的日志 cat appapi.dayutang.cn.access.log |grep 'POST'|grep '2019:10' > 20191059. ...
- hdu 1572 全排列的搜索
好久没写搜索的题目了 复习一下/./ 这道题目是暴力的全排列#include<cstdio> #include<iostream> #include<cstring> ...
- MVC授权不通过之后不执行任何自定义ActionFilter
如下一个Action [Authorize] [F1]//自定义过滤器,继承自ActionFilter public ActionResult Index() { return View(); } 如 ...
- Oracle 分页语句
** 写法1 :采用 ROWNUM的伪列: --查询10到20之间的数据 -- SELECT * FORM ( -- SELECT * , ROWNUM rn FROM TABLE_NAME -- W ...
- js Indexof的用法
JavaScript中indexOf()函数 JavaScript中indexOf()函数方法返回一个整数值,指出 String 对象内子字符串的开始位置.如果没有找到子字符串,则返回 -1.如果 ...