Как центрировать один символ как по вертикали, так и по горизонтали в квадратном div

Я хочу центрировать в квадрате div произвольный символ. Я признаю, что это звучит как очень простая задача, но ничего, что я пробовал, работает (и я пробовал всевозможные вещи!) 1.

For concreteness, let say that the div has height and width equal to 20ex, and let say that the single character is the so-called "multiplication sign": ✕, nice and symmetric. я want this character to be positioned inside the 20ex-by-20ex square div such that the point where the two strokes cross is dead-center, both vertically and horizontally, within the div.

EDIT:

I tried the answers I've received so far, here. The solutions given by Jedidiah and by Ashok Kumar Gupta (second and third divs) produce pretty similar results, but (maybe I'm seeing things), the ✕ in the third div is just a hair above the vertical center.

1 Я узнал, что независимо от того, насколько разумно прост может возникнуть задача компоновки, она все равно может потребовать от меня часов и часов и часов, чтобы понять CSS для его достижения.

Ответы

Ответ 1

Настройка высоты строки на высоту контейнера должна быть выполнена.

text-align: center;
line-height:20px;
width:20px;
height:20px;

Пример здесь: http://codepen.io/Jedidiah/pen/rLfHz

Ответ 2

Используйте display:table-cell и vertical-align:middle и text-align:center. Как это в вашем CSS:

#center{
    width:100px;height:100px;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

display:table-cell требуется, чтобы использовать vertical-align для центра содержимого в div (не спрашивайте меня, почему кто-то решил сделать это как :)).

Смотрите JSFiddle.

Ответ 3

Этот вопрос немного устарел, но, заметив редактирование OP:

Я попробовал ответы, которые я получил до сих пор, здесь. Решения, данные Джедидией и Ашоком Кумаром Гуптой (второй и третий дивизии), дают довольно похожие результаты, но (возможно, я вижу вещи), ✕ в третьем div - только волосы выше вертикального центра.

Я хотел опубликовать это, если вы использовали × вместо ✕, центрирование выглядит намного лучше.

https://codepen.io/persianturtle/pen/zPKbRj

Ответ 4

этот вопрос немного старый, но это первый ответ, когда вы ищете "центрировать одну букву в квадрате css"

так что в 2018 году вы можете просто сделать

#center {

   width: 0;
   height: 0
   display: flex;
   justify-content: center;
   align-items: center;
}
  • justify-content: center выровнен по горизонтали
  • align-items: center выровнять по вертикали

Обратите внимание, что он будет работать независимо от формы div, может быть прямоугольником.

Ответ 5

На ваш вопрос:

<div style="width: 20em;height: 20em; background: red;display: table;">
<p style="display: table-cell;text-align: center;vertical-align: middle;">X</p></div>

Примечание: фон: красный; только для визуализации.

:)

Ответ 6

Просто невозможно использовать css только для центрирования одного символа по вертикали и горизонтали в div, потому что это зависит от шрифта, который браузер будет использовать для визуализации символа.

Для тех, кто просто хочет центрировать "X", безопаснее сделать "X" прозрачным, создать псевдоэлементы: before и: after, придать им тонкую ширину и фон, который имеет тот же цвет, что и начальный " X ", затем поверните их на + или - 45 градусов.

HTML код:

<div>X</div>

Код CSS:

* {
  box-sizing: border-box;
}

div {
  font-size: 2em;
  position: relative;
  border: 1px solid black;
  width: 2em;
  height: 2em;
  color: transparent;
}

div:before,
div:after {
  content: "X";
  display: block;
  z-index: 1;
  position: absolute;
  top: 0.25em;
  bottom: 0.25em;
  left: 0.9em;
  right: 0.9em;
  background-color: black;
}

div:before {
  transform: rotate(45deg);
}

div:after {
  transform: rotate(-45deg);
}

Вот jsfiddle: https://jsfiddle.net/z4pmu7r9/