整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
.水平居中的 margin：0 auto;
关于这个，大家也不陌生做网页让其居中用的比较多, 这个是用于子元素上的，前提是不受float影响
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
border: 3px solid red;
/*text-align: center;*/
}
img{
display: block;
width: 100px;
height: 100px;
margin: 0 auto;
}
</style>
<!--html-->
<body>
<div class="box">
</div>
</body>我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，去年我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。
2.水平居中 text-align：center；
img的display：inline-block；类似一样在不受float影响下进行 实在父元素上添加效果让它进行水平居中
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
border: 3px solid red;
text-align: center;
}
img{
display: inline-block;
width: 100px;
height: 100px;
/*margin: 0 auto;*/
}
</style>
<!--html-->
<body>
<div class="box">
</div>
</body>3.水平垂直居中（一）定位和需要定位的元素的margin减去宽高的一半
这种方法的局限性在于需要知道需要垂直居中的宽高才能实现，经常使用这种方法
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
background:#e9dfc7;
border:1px solid red;
position: relative;
}
img{
width: 100px;
height: 150px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -50px;
}
</style>
<!--html -->
<body>
<div class="box" >
</div>
</body>4.水平垂直居中（二）定位和margin:auto;
这个方法也很实用，不用受到宽高的限制,也很好用
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
background:#e9dfc7;
border:1px solid red;
position: relative;
}
img{
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
<!--html -->
<body>
<div class="box" >
</div>
</body>5.水平垂直居中（三）绝对定位和transfrom
这个方法比较高级了，用到了形变，据我所知很多大神喜欢使用这个方法进行定位，逼格很高的，学会后面试一定要用！这个是不需要知道居中元素的宽高就可以使用的，代码里的图片稍微有点大，改改宽高，仅此而已，在面试中大部分人会问如果不知道宽高该如何居中，答这个，加分！对transform不了解的同学可以查阅一下资料了解一下！
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
background:#e9dfc7;
border:1px solid red;
position: relative;
}
img{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
<!--html -->
<body>
<div class="box" >
</div>
</body>6.水平垂直居中（四）diplay：table-cell
其实这个就是把其变成表格样式，再利用表格的样式来进行居中，很方便
<style>
.box{
width: 300px;
height: 300px;
background:#e9dfc7;
border:1px solid red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
img{
width: 100px;
height: 150px;
/*margin: 0 auto;*/ 这个也行
}
</style>
<!--html -->
<body>
<div class="box" >
</div>
</body>7.水平垂直居中（五）flexBox居中
这个用了C3新特性flex,非常方便快捷，在移动端使用完美，pc端有兼容性问题，以后会成为主流的
<style>
.box{
width: 300px;
height: 300px;
background:#e9dfc7;
border:1px solid red;
display: flex;
justify-content: center;
align-items:center;
}
img{
width: 150px;
height: 100px;
}
</style>
<!--html -->
<body>
<div class="box" >
</div>
</body>8.水平垂直居中（六）利用vertical-align:middle;
这方法不常见，但是一位朋友补充后我觉得也不失为一种好方法可以让别人刮目相看，这个方法关键要有一个和容器一样高的元素作为居中的一个参照就像b元素一样
<style>
.wrap{
width:300px;
height:300px;
background:rgba(0,0,0,0.5);
text-align:center;
font-size:0;
}
.vamb{
display:inline-block;
width:0px;
height:100%;
vertical-align:middle;
}
.test{
display:inline-block;
vertical-align:middle;
font-size:16px;
text-align:left;
background:red;
}
</style>
<body>
<div class="wrap">
<b class="vamb"></b>
<div class="test">
宽高不定<br>
垂直水平居中
</div>
</div>
</body>常见又实用的例子就先写到这，欢迎提意见，谢谢大家！喜欢请关注点个赞，也是对我的支持和鼓励！
作者：coderLfy链接：https://www.jianshu.com/p/a7552ce07c88
TML ul li 横排居中排列的方法，三步骤及实例
无序列表的列表项默认情况下是竖着排的，因为li元素是块级元素，会自动分行。那如果要将列表的列表项进行横排，比用无序列表ul元素定义一个导航条。那该怎么办呢？这当中有三个应当被解决的东西，一个是横排本身，另一个就是应当把无序列表项的圆点去掉，第三则是让ul定义的列表居中显示，包括水平居中和垂直居中。方法如下：
HTML ul li 横排居中排列的方法，三步骤及实例
将ul无序列表元素中的列表项li元素的display属性设置成inline或inline-block，个人比较常用的是后者：
ul li{display:inline-block;}
水平居中方法：只要将ul元素包含于一个div元素，并将div元素的text-align属性设置为center即可将ul水平居中。除此之外，因为ul的列表默认情况下是有左内边距的，所以，为了能够让列表能够更好地水平居中，需要将ul的左内边距padding-left设置为0，具体可见下方的综合实例。
垂直居中方法：为包含ul元素的div元素设置宽度width和高度height（实际上导航条一般也需要有宽度和高度的设置），然后将ul的line-height属性设置为父元素的高度height即可。
将ul元素的list-style属性设置为none即可。
HTML ul li 横排居中排列的方法，三步骤及实例
<div class='e1'>
<ul class='e2'>
<li>HTML</li>
<li>python</li>
<li>golang</li>
</ul>
</div>
<style>
.e1{width:100%;height:50px;border:1px solid skyblue;text-align:center;}
.e2{list-style:none;padding-left:0%;}
.e2 li{line-height:50px;display:inline-block;}
</style>HTML ul li 横排居中排列的方法，综合实例在线 - HTML教程
如上代码，一定要将ul的左内边距padding-left设置为0，否则ul列表的“水平居中”将偏向右边，大家可以将.e2中的padding-left删除掉，然后再在线运行看一看效果。
笨鸟工具-璞玉天成，大器晚成
要： flexbox是个很强大的布局模块，三个属性就搞定居中，而且不论父容器还是居中元素都可以不定宽高
水平居中
align="center"
直接在标签对象内加align="center"即可让对象内图片横向水平居中显示
align="center"使用方法：
<div align="center">aaa</div>
点击并拖拽以移动
text-align:center
<style> .divcss5{text-align:center} </style> <div class="divcss5">aaa</div>
点击并拖拽以移动
text-align是针对父元素进行设置,只能对图片，按钮，文字等行内元素(display为inline或inline-block等)起作用，起作用的首要条件是子元素必须没有被float影响。但要说明的是在IE6、7这两个奇葩的浏览器中，它是能对任何元素进行水平居中的
把margin设为auto
具体来说就是把要居中的元素的margin-left和margin-right都设为auto，此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效
<style> body{ text-align:center} .div{ margin:0 auto;} </style> <div class="div">aaa</div>
点击并拖拽以移动
使用display:table-cell来居中
表格中只要用到 td(或 th)元素的 align="center" 和 valign="middle" 这两个属性就可以完美处理,而且表格默认对它里面的内容进行垂直居中。在css中控制表格内容的居中可以使用 vertical-align:middle，至于水平居中，css中没有相对应的属性的,但在IE6、7中可以用text-align:center对表格里的元素设置，IE8+及谷歌、火狐等的text-align:center只对行内元素起作用，对块状元素无效
对于不是表格的元素，可以通过display:table-cell 来模拟成一个表格单元格，这样就可以利用表格很方便的居中特性了
<div style="display:table-cell;width:200px;height:200px;border:1px solid #ccc;"> <div>aaa</div> </div>
点击并拖拽以移动
使用绝对定位来进行居中
此法只适用于那些我们已经知道它们的宽度或高度的元素。
绝对定位进行居中的原理是通过把绝对定位元素的left属性设为50%,此时元素并不居中，而是比向右偏了这个元素宽度的一半，需要使用一个负的margin-left把它拉回到居中的位置，这个负的margin值就取元素宽度的一半
使用这个方法的好处在于无论你是什么形式的内容都可以马上居中，而缺点就是必须对元素有确定的宽高值，否则的话可能就需要通过javascript来进行一些小计算了
<style> .child{width:100px;height:100px;position:absolute;left:50%;margin-left:-50px;} </style> <div class="parent"> <div class="child">aaa</div> </div>
点击并拖拽以移动
利用盒模型实现水平居中--padding填充
margin
绝对居中
<style> .Center {width:100px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } </style> <div class="Center">aaa</div>
点击并拖拽以移动
优点：支持跨浏览器，包括IE8-IE10。无需其他特殊标记，CSS代码量少。支持百分比%属性值和min-/max-属性。只用这一个类可实现任何内容块居中。不论是否设置padding都可居中（在不使用box-sizing属性的前提下）。内容块可以被重绘。完美支持图片居中。
缺点：必须声明宽度。建议设置overflow:auto来防止内容越界溢出。在Windows Phone设备上不起作用。
使用浮动配合相对定位来进行水平居中
<style> .parent{width:300px;height:200px;border:1px solid red;} .wraper{float:left;position:relative;left:50%;clear:both;} .child{border:1px solid blue;position:relative;left:-50%;white-spave:nowrap;} </style> <div class="parent"> <div class="wraper"> <div class="child">aaa</div> </div> </div>
点击并拖拽以移动
这个是浮动元素水平居中的解决方法，且我们不需要知道元素的宽度
浮动居中的原理是：把浮动元素相对定位到父元素宽度50%的地方后需要他里面的子元素再用一个相对定位，把那多出的自身一半的宽度拉回来，而因为相对定位正是相对于自身来定位的，所以自身一半的宽度只要把left 或 right 设为50%就可以得到了，因而不用知道自身的实际宽度是多少
优点是不用知道要居中的元素的宽度，即使这个宽度是不断变化的也行；缺点是需要一个多余的元素来包裹要居中的元素
使用button标签
*请认真填写需求信息，我们会在24小时内与您取得联系。
