布局
何如让一个标签上下左右都居中?这有什么难的,给定子标签的宽,再让它的边距上下为0,左右为auto;以下:布局
.child{width:10px;margin:0 auto;}//子标签
它就能够左右居中了。上下的话,就是让父标签展示成表格,子标签展示成单元格并把vertical-align属性设置成middle就能够了;flex
.father{display:table} .child{display:table-cell;vertical-align: middle;}
它就能够了上下也居了。
可是...这种技术太老了!并且只适合pc端,移动端的不适合用这套...
其实移动端的不难,用flex布局。这布局也不难,不是特别高端的技术,因此应该把它学起来!不说了直接上代码。code
.father{background-color: red;width: 120px;height: 110px;display: flex;justify-content:center;align-items:center;} .child{background-color: blue;width: 20px;height: 10px;}
上面也是能够实现上下左右居中,并且flex布局不单单这有这样,它至关牛!
上面的核心代码:
display: flex;//标签展示成flex
justify-content:center;//让子标签水居中
align-items:center;//让子标签垂直居中it