中心绝对定位div [英] Center absolute positioned div

问题描述

我有一个div，其中有一个按钮:

I have a div, in it there is a button:

我将按钮位置设置为absolute，并将其样式代码设置为:

I let the button position to absolute, and its style code:

  .buy-btn {
    text-align: center;
    position: absolute;
    bottom: 10px;

  }

如何将其对准中心?我尝试添加margin: 0 auto;，但是不起作用.

How can I align it to center? I tried add margin: 0 auto;, but it not work.

推荐答案

如果我理解您的问题，它将按以下方式工作.

您可以通过三种方式进行操作.

You can do it in three ways.

否1-使用位置.将宽度100％应用于按钮父级div，然后将按钮样式应用为波纹管.

.buy-btn{
    display: inline-block;       /* Display inline block */
    text-align: center;          /* For button text center */
    position: absolute;          /* Position absolute */
    left: 50%;                   /* Move 50% from left */
    bottom: 10px;                /* Move 10px from bottom */
    transform: translateX(-50%); /* Move button Center position  */
}

否2-使用父级div，将宽度100％应用于父级div，然后从按钮中删除绝对位置.

.parentDiv {
    width: 100%;            /* for full width */
    text-align: center;     /* for child element center */
 }

.buy-btn{
    display: inline-block;       /* Display inline block */
    text-align: center;          /* For button text center */
}

否3-使用边距，将宽度100％应用于父div，然后从按钮中删除绝对位置.

.parentDiv {
    width: 100%;            /* for full width */
 }

.buy-btn{
    display: inline-block;       /* Display inline block */
    text-align: center;          /* For button text center */        
    margin: 0 auto;              /* For button center */
}

这篇关于中心绝对定位div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！