如何在 CSS 中将框居中？

发布于 2024-11-16 23:25:04 字数 356 浏览 0 评论 0原文

我想知道如何才能使这个框居中？

HTML 代码：

<div id="box"></div>

CSS 代码：

#box
{
  width : 30%;
  height : auto;
  overflow : auto ;
  border : 1px solid #C5C5C5;
  background : #F8F8F8;
  position : absolute;
  left : 33.6%;
  border-top : none;
  text-align : left;
  display : none;
}

原文

I would like to know how can i center this box?

HTML Code:

<div id="box"></div>

CSS Code:

#box
{
  width : 30%;
  height : auto;
  overflow : auto ;
  border : 1px solid #C5C5C5;
  background : #F8F8F8;
  position : absolute;
  left : 33.6%;
  border-top : none;
  text-align : left;
  display : none;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

伪心 2024-11-23 23:25:04

尝试以下 CSS：

#box
{
    margin: 0 auto;
    width: 100px; /* Or some other width */
}

Try the following CSS:

#box
{
    margin: 0 auto;
    width: 100px; /* Or some other width */
}

回复收藏 0 原文

梦开始←不甜 2024-11-23 23:25:04

由于 #box 是绝对定位的，因此您可以像这样将其居中：

#box {
    left: 50%; /* centers #box in its containing element */
    margin-left: -15%; /* half the element's width (30%) */
}

这些属性是您已经设置的属性之外的属性。

这个想法是将 #box 的左边缘定位在其包含元素的中心 (left: 50%)，然后通过给它一个负边距 (margin-left: -15%) 将 #box 向左移动其自身宽度的一半。

Since #box is absolutely positioned, you would center it like so:

#box {
    left: 50%; /* centers #box in its containing element */
    margin-left: -15%; /* half the element's width (30%) */
}

Those properties are in addition to the ones you've set already.

The idea is to position #box's left edge in the center of its containing element (left: 50%), then move #box left by half its own width by giving it a negative margin (margin-left: -15%).

回复收藏 0 原文

许你一世情深 2024-11-23 23:25:04

这对我有用：

.Box {
   background-color: lightgrey;
   width: 400px;
   border: 25px solid grey;
   padding: 25px;
   margin: 25px;
   align-content:center;
   position: fixed;
   top: 50%;
   left: 50%;
   margin-top: -50px;
   margin-left: -100px;
}

This works for me:

.Box {
   background-color: lightgrey;
   width: 400px;
   border: 25px solid grey;
   padding: 25px;
   margin: 25px;
   align-content:center;
   position: fixed;
   top: 50%;
   left: 50%;
   margin-top: -50px;
   margin-left: -100px;
}

回复收藏 0 原文

~没有更多了~