css中的定位和布局问题
（1）绝对定位
transform: translateY(-50%) 实现元素垂直居中效果
transform:translate(-50%,-50%)实现水平垂直居中
通过position absolute和top 50%，结合transform产生效果。
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)
（2）margin:auto;
通过分配auto元素的左右边距，它们可以平等地占据元素容器中的可用水平空间 - 因此元素将居中。
特别注意的一点是需要设置此居中元素的width和height，否则margin:auto不会生效。
特别注意的一点是需要设置此居中元素的width和height，否则margin:auto不会生效。
并且这只适用于水平边距，它不适用于浮动和内联元素，并且它本身也不能用于绝对和固定定位元素。
position:absolute; left:0; top:0; right:0; bottom:0; margin:auto;
（3）flex布局
display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
display:flex; align-items:center; justify-content:center;
flex容器的属性：justify-content，能够设置子元素的对齐和空间分配方式，常用的就是居中设置。
投递腾讯等公司6个岗位
查看5道真题和解析