将该元素定位到页面中心 - CSS

Question

我已经苦战了相当长的时间，但是一直没有什么好运气，它总是在页面上随意移动！

我想让我的控件将此组件居中于页面中间。 我还想将其绕其中心轴（Y或X，无所谓）旋转翻转（3d），但我在第一步中没有成功，即只是让它居中。

<div className="note-container">
                <div className="note"
                    style={Object.assign({}, note.position) }>
                    <p>{note.text}</p>
                    <span>
                        <button onClick={() => onExpand(note.id) }
                            className="btn btn-warning glyphicon glyphicon-resize-full"/>
                        <button onClick={() => onEdit(note.id) }
                            className="btn btn-primary glyphicon glyphicon-pencil"/>
                        <button onClick={onRemove}
                            className="btn btn-danger glyphicon glyphicon-trash"/>
                    </span>
                </div>
            </div>

我调用的重新将其居中的函数是 function onExpand(noteId){...}

下面是 .note-container 和 .note 的 CSS 样式：

div.note-container {
    position: fixed;
    top: 5%;
    left: 90%;
}

div.note {
    height: 150px;
    width: 150px;
    background-color: yellow;
    margin: 2px 0;
    position: relative;
    cursor: -webkit-grab;
    -webkit-box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, .2);
    box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, .2);
}

div.note:active {
    cursor: -webkit-grabbing;
}

div.note p {
    font-size: 22px;
    padding: 5px;
    font-family: "Shadows Into Light", Arial;
}

div.note div.back p {
    font-size: 30px;
    padding: 5px;
    font-family: "Shadows Into Light", Arial;
}

div.note:hover> span {
    opacity: 1;
}

div.note> span {
    position: absolute;
    bottom: 2px;
    right: 2px;
    opacity: 0;
    transition: opacity .25s linear;
}

div.note button {
    margin: 2px;
}

div.note> textarea {
    height: 75%;
    background: rgba(255, 255, 255, .5);
}

这里是onExpand函数

    onExpand(noteId) {

    //This needs a lot of work....
    event.preventDefault();

    let flippedNote = this.props.notes
        .filter(note => note.id === noteId)[0];
    flippedNote.position.transition = "1.0s";
    flippedNote.position.transformStyle = "preserve-3d";
    flippedNote.position.backgroundColor = "#3498db";
    flippedNote.position.color = "white";
    flippedNote.position.width = "300px";
    flippedNote.position.height = "300px";

    flippedNote.position.position = "absolute";
    flippedNote.position.right = `50% -${flippedNote.position.width / 2}px`;
    flippedNote.position.top = `50% -${flippedNote.position.height / 2}px`;
    // flippedNote.position.transform = "translate(-50%, -50%) rotateY(180deg)";

    this.setState({/*Stuff later... */});
}

同时，当我在页面上呈现笔记时，根据以下逻辑（这是最初传递给div.note元素的样式属性）将其分配到页面上的随机位置：

position: {
                    right: randomBetween(0, window.innerWidth - 150) + "px",
                    top: randomBetween(0, window.innerHeight - 150) + "px",
                    transform: "rotate(" + randomBetween(-15, 15) + "deg)"
                }

这是页面上的HTML代码（注意我还使用transform: translate(...)将便签移动到页面上）。

- Spets

Answer 1

试试这个：

div.note 
 {
    position: relative;
    width: 150px;
    left: 0;
    right: 0;
    margin: 2px auto;
 }

- RandyDaddis

---

我在这方面毫无运气，我感觉我的其他样式正在覆盖所有这些。 - Spets

Answer 2

要控制位置，您可以在 div.note 上设置 position: relative; 或 position: absolute;。或者，也可以通过操作边距来实现，但这不是一个好的方法。您可以通过在浏览器中打开页面并通过 Chrome 的开发者工具操纵 CSS 值来手动测试代码。

- user6269864

---

我已经尝试了两种方法，但是我感觉我已经碰到了瓶颈，因为我一直在修改翻译和其他样式。根据上面的图片，你认为怎么样？ - Spets

Answer 3

这是我在周末工作后得出的最终解决方案：

onExpand(noteId, currentNotePosition) {

        event.preventDefault();
        let note = this.props.notes
            .filter(specificNote => specificNote.id === noteId)[0];

        const centerOfWindow = {
            left: window.innerWidth / 2,
            top: window.innerHeight / 2
        };

        if (!note.centered) {
            note.position.transition = "all 1s";
            note.position.transformStyle = "preserve-3d";
            note.position.backgroundColor = "#3498db";
            note.position.color = "white";
            note.position.width = "300px";
            note.position.height = "300px";
            note.position.zIndex = "100";
            note.position.position = "relative";
            const offset = {
                x: 150,
                y: 150
            };
            const translatedCoordinates = this.getCoordinateTarget(centerOfWindow, offset, currentNotePosition);
            note.position.transform = `translate(${translatedCoordinates.x}px, ${translatedCoordinates.y}px) rotateY(180deg)`;

            note.originalPosition = {
                left: currentNotePosition.left,
                top: currentNotePosition.top,
                width: currentNotePosition.width,
                movement: translatedCoordinates
            };

            note.centered = true;
        } else {
            note.position.backgroundColor = "yellow";
            note.position.color = "black";
            note.position.width = "150px";
            note.position.height = "150px";
            note.position.transform = "";
            note.centered = false;
        }

        this.props.stickyNoteActions.repositionedNoteSuccess(Object.assign({}, note));
    }

- Spets