绘制完美居中的网格或十字架（对于<div>）？

Question

有时我想将div中的元素水平或垂直对齐（而不是实际编写代码以使它们居中），显然设计师在他们的应用程序中有网格可以帮助他们做到这一点。

是否有可能在css中创建类似的东西来绘制网格或者可能是特定div的简单交叉，这样就可以更容易地移动该div中的元素（因为这些行会是一个指导我的元素是如何集中的？）

感谢!!!

Answer 1

最简单的方法：创建一个巨大的方形图像，中间有一个十字形。然后，您可以将该图像用作居中的背景：

＆＃13;

＆＃13;

#some-div {
  display: inline-block;
  width: 350px;
  height: 270px;
  border: 1px solid #888;
}

#some-div {
  background: url(https://i.stack.imgur.com/SHV0i.png) 50% 50% no-repeat;
}

＆＃13;

<div id="some-div"></div>

＆＃13;

＆＃13;

＆＃13;

或者，您可以使用:before和:after来使用CSS，但在某些情况下可能无法解决这个问题：

https://jsfiddle.net/atesgoral/qkomLpo7/

Answer 2

.stackOvExample{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

在CSS中：

action