这个问题通常在开发中遇到,即某个元素的内容朝着水平和垂直方向遇到。内容不仅限于文本,也许是图片或其他元素
该中心是一个非常基本但非常重要的应用程序方案。有很多方法可以实现该类别。您可以将这些方法分为两类:
如何实现元素水平垂直度:
代码首先:
父级设置是相对定位,子级别是绝对定位的,并且四个定位属性的值设置为0。此时,如果未设置子级别的高度,则将其拉开为父级高度高的高度与父级高度一样高
在这里,子元素设置为宽高,因此将根据我们的设置显示较高的高度,但实际上,子级虚拟位置已充满了整个父级。此时
在大多数情况下,将父元素设置为相对定位,子元素移动移动本身的50%以实现水平垂直中心
整个实施想法如下图所示:
该方案不需要父元素的高度,即,即使父元素的高度已更改,也可以将其保持在父元素的介质位置。
但是该计划需要知道子元素本身的高度,但是我们可以浏览以下属性
实施代码如下:
翻译(-50%,-50%)将把元素转移到其自身宽度和高度-50%的高度
该方法实际上与上面否定的边距的负值相同。可以说,它是保证金负值的替代方法。
设置父元素,子元素设置。启用并允许所有线路级别的元素级别直立在中间
或查看实施的整体守则:
CSS3具有弹性布局,可以轻松达到垂直水平水平
在这里,您可以简要查看Flex布局的关键属性:
我可以在这里看到网格布局和弹性布局简单而粗鲁
在上述方法中,不知道元素宽度和高度仍然可以在水平上实现水平垂直生活的方法:
根据元素标签的性质,可以分为:
水平中心
垂直中心
水平中心
垂直中心