【校招VIP】前端CSS考点之水平/垂直居中

考点介绍：

前端布局非常重要的一环就是页面框架的搭建，也是最基础的一环。在页面框架搭建之中，又有居中布局/多列布局/全局布局。今天介绍一下居中布局的水平居中和垂直居中。

本期分享的内容分为试题、文章及视频三部分，答案详情解析和文章内容点击文章末尾链接即可查看！

一、考点题目

1、请使用绝对定位实现水平垂直居中。

解答：在平时，我们经常会碰到让一个div框针对某个模块上下左右都居中（水平垂直居中），其实针对这种情况，我们有多种方法实现……

2、CSS 样式，通过设置左和右 ____ ，可以把块元素调整到水平居中位置。

A.边距为 auto

B.边距为 50%

C.边距为 none

D.边距为 center

正确答案： A，margin是外边距的意思，当一个元素样式属性里有margin:0 auto时......

3、有关 CSS 外边距 margin 说法错误的是（）

A.围绕在元素边框的空白区域是外边距

B.margin 设置为 auto 相当于设置为 0

C.设置外边距会在元素外创建额外的「空白」

D.设置外边距使用 margin 属性，可以接受任何长度单位、百分数值甚至负值

正确答案：B，margin 设置为 auto 时，浏览器会自动计算外边距……

4、请你说说设置水平居中，垂直居中，设置斑马线表格(纯css)

解答：水平居中，行内元素：父元素 text-align: center……

二、考点文章

1、CSS水平居中+垂直居中的方法总结

首先看它的父元素是不是块级元素，如果是，则直接给父元素设置 text-align: center;……

2、HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结

最近写网页经常需要将div在屏幕中居中显示，遂记录下几个常用的方法，都比较简单……

3、CSS 设置元素水平垂直居中的几种方式

如何让一个行内元素（文字、图片等）水平垂直居中……

三、考点视频

把CSS的复杂选择器和简单选择器放到一起比较优先级，会不会晕

当我们写页面的时候，不知道你会不会产生这样的问题，为什么我给他添加的这条样式分明已经选择到我要给的元素了，但是他的样式并没有生效，那是为什么呢……

相关题目及解析内容可点击下方链接查看：
PC端链接：https://xiaozhao.vip/dTopic/detail/1327
移动端链接：https://m.xiaozhao.vip/dTopic/detail/1323