CSS让绝对定位的元素居中的办法

水平居中,设置left:0,right:0, 垂直居中,设置top:0,bottom:0。margin设置为auto

<!DOCTYPE html>
<html lang="en">
<head>
  <title>SO question 2803532</title>
  <style type="text/css">
    .absolute-center {
      position: absolute;
      width: 100px;
      height: 100px;
      margin: auto;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: red;
    }
  </style>
</head>
<body>
    <div class="absolute-center"></div>
</body>
</html>

版权声明:著作权归作者所有。

相关推荐

CSS应用苹果的San Francisco字体

优先选择苹果字体,并兼容其它平台的字体。font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu,"Helvetica Neue",Arial,sans-serif;

如何使用CSS变量让响应式变得超级简单

本文是关于如何在2018年创建响应式网站的快速教程。如果你之前没有听说过CSS变量,它就是CSS的新增功能,它让你可以在样式里使用变量的功能,而无需进行任何设置。实质上,CSS变量允许你跳过设置样式的旧方式:h1 {   font-size: 30px; } navbar > a {   font-si

Python:查询列表给定元素的索引

单一索引列表的index()函数返回列表里第一次遇到给定元素的索引。>>> ["a", "b", "c"].index("b") 1 多个索引如果需要返回给定元素的所有索引,则要遍历列表:indexes = [index for i

JavaScript监控元素外的点击事件隐藏元素

监控document的点击事件,使用jquery的closet排除指定元素以及其子元素的点击事件。function hideOnClickOutside(selector) {   $(document).on('click',function(event){     if (!$(event.target)

CSS3:Flex布局

Flex是一种弹性布局,要分为两部分理解Flex:作用于容器(flex-container)的属性作用于容器里项目(flex-item)的属性Flex布局不同于块元素的垂直排列和行内元素的水平排列。Flex布局可以根据需要设定容器内的项目元素是水平还是垂直分布。设定了flex的方向后,我们就可以确定了Flex分布的主轴(main axis)以及交叉轴(cross axis)。主